IMG-LOGO
Home Tutorial Vertical Menu

Vertical Menu

by MH RISHAD - 19 Oct 2018
IMG

Learn how to create a vertical menu with CSS.

How To Create a Vertical Button Group

Step 1) Add HTML:

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

Step 2) Add CSS:

.vertical-menu {
    width: 200px; /* Set a width if you like */
}

.vertical-menu a {
    background-color: #eee; /* Grey background color */
    color: black; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
    background-color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
    background-color: #4CAF50; /* Add a green color to the "active/current" link */
    color: white;

Vertical Scroll Menu: 

Set a specific height and add the overflow property if you want a vertical scroll menu:

.vertical-menu {
    width: 200px;
    height: 150px;
    overflow-y: auto;
}

 

Share:

Leave a Comment

Required fields are marked *