How to create CSS hoverable side navigation menu

In this guide, I will explain how to create a vertical side menu using Bootstrap, and CSS and optionally Javascript. Even if you are a beginner, you will be able to implement this and create a hoverable vertical navigation menu with ease.

There are multiple ways to implement hoverable vertical menu though it depends on some factors.

1. Is the number of sub-items under each menu item equal?
2. Do you want to use Only css or can use jquery plugin too?

Don't worry if this questions confuse you. Later, when you will see the different examples, you will understand the meaning of these questions.

Method #1– Create Vertical Side Hoverable menu with equal number of sub-items using only CSS

This is the most flexible vertical menu with great user experience though one downside is, you can only keep equal number of sub-items under each menu item which is not usual case generally.

Step 1 – HTML Markup

At first, we will create a basic structure of our vertical menu with 3 menu items and 3-3 sub-items in each menu items.

Note that, here I am using fontawesome too but you are not required to use it. If you do want to use fontawesome icons then don't forget to add font-awesome.css file in header.

<nav>
    <div class="menu-item">
      <h4><a href="#"><i class='fa fa-gear'></i> Settings</a></h4>
      <ul>
        <li><a href="#">Account</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Security</a></li>
      </ul>
    </div>

    <div class="menu-item">
      <h4><a href="#"><i class='fa fa-question-circle'></i> Help</a></h4>
      <ul>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Submit a ticket</a></li>
        <li><a href="#">Network Status</a></li>
      </ul>
    </div>

    <div class="menu-item">
      <h4><a href="#"><i class='fa fa-envelope'></i> Contact</a></h4>
      <ul>
        <li><a href="#">Phone</a></li>
        <li><a href="#">Email</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>
</nav>

Step 2 – Menu Layout

We will start by removing some default margin. Then we will add some basic font styles, margin, and width to vertical navigation menu. We will keep menu width to 200px.

For menu headers a.k.a top level menu items, we will set basic styles like color, font-size, background, border-bottom etc. This will give header a unique distinct look keeping it different from sub-menu items.

* {
  margin: 0px;
  padding: 0px;
}

nav {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  margin: 50px auto; 
  width: 200px;
}

.menu-item {
  width: 200px; 
}

/*Menu Header Styles*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #b90329;
  border-bottom: 1px solid white;
}
.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 200px;
}

.menu-item h4:hover {  
  background: #cc002c; 
}

Step 3 – Sub Menu

Here first, we are targeting the sub-menu as whole. We will set the background color of submenu as white. Then we will set other basic styling like font-size, line-height , padding etc. Here you can see that we set the height of ul element to 0. This means, by default submenu will be hidden. We will show submenu on hover only. Also we will set list-style-type to none.

For animation, we are using height animation which will increase the height of submenu using animation. Here we set the height of submenu on hover to 93px. But in your case, this value might be different. If you are using more than 3 sub-menu items or less then 3 items then you have to set accordingly.

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;

  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.menu-item:hover ul {
  height: 93px;
}
.menu-item ul a {
  margin-left: 15px;
  text-decoration: none;
  color: #aaa;
  display: block;
  width: 200px;
}
/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}

.menu-item li:hover {
  background: #eee;
}

Demo

One important thing to note here is that we can’t just set the height to auto because for some reason this disables the animation. If we could set the height to auto, we could use different numbers of sub items under menu items. That's why, I will also show another method to display unequal number of sub items in vertical menu using hover.

Method #2 – Create Side Hoverable menu using CSS and Javascript

This is another method to create vertical expanding menu using CSS, jQuery and another jQuery plugin called jQuery-hoverIntent.js.

With this method, there is no limitation of keeping child items of equal numbers. Thus making it a great way to implement the hover expanding functionality but the catch is you need to load special jquery plugin to achieve that. That should not be an issue in normal circumstances.

Ohk so let's see one example.

Step 1 – HTML Markup

First, we will create a basic structure which will contain a vertical menu with 3 menu items and unequal number of child items -- a normal occurrence.

<div id="container">
  <ul id="nav1">
    <li><a href="#">Portfolio</a>
    <ul>
        <li><a href="#">Web</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Other</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Other</a></li>
    </ul>
    </li>
    <li><a href="#">About</a>
      <ul>
      <li><a href="#">History</a></li>
        <li><a href="#">Meet The Owners</a></li>
        <li><a href="#">Awards</a></li>
    </ul>
    </li>
    <li><a href="#">Menu Heading 3</a>
    <ul>
      <li><a href="#">Stage1</a></li>
      <li><a href="#">Stage2</a></li>
      <li><a href="#">Stage3</a></li>
      <li><a href="#">Stage4</a></li>
    </ul>
    </li>
</ul>
<div>

Step 2 -- Menu Layout (CSS)

Now we will use some css to design it a bit. This is just a demo so you can use any css styles you want to style it as per your requirements.

Do notice that we are hiding the child item list by default. We will use jquery plugin to show them on hover in next step.

ul,
li,
a {
  padding: 0px;
  margin: 0px;
}

#nav1 a {
  color: #FFFFFF;
}

#nav1 li ul li a:hover {
  background-color: #394963;
}

div ul li ul {
  background-color: #4a5b78;
  list-style: none
}

#nav1 > li > a {
  background-color: #343434;
  padding: 16px 18px;
  text-decoration: none;
  display: block;
  border-bottom: 2px solid #212121;
  background: linear-gradient(top, #343434, #111111);
}

#nav1 li ul li a {
  padding: 10px 0;
  padding-left: 30px;
  text-decoration: none;
  display: block;
}

div {
  background-color: #000000;
  background-color: #343434;
  width: 280px;
}
/* Hide Dropdowns by Default */
#nav1 li ul {
  display: none;
}

Step 3 -- Hover Expanding Menu using jQuery

Here we are using jQuery as well as jQuery plugin -- jquery.hoverintent.js to make the child menu slidedown and slideup on hover. We could have done this with only jquery without the need of loading another jquery plugin but it leads to flickering issue. Thus, this plugin exists to resolve that issue.

You can get the jquery-hoverintent.js file from here

$(document).ready(function() {
  $("#nav1 li").hoverIntent(
    function() {
      $(this).find('ul').slideDown();
    },
    function() {
      $(this).find('ul').slideUp();
    });
});

Demo

Conclusion

There are some other tricks to achieve the similar effect but they have some user experience issues. Personally I found these methods so far best compared to others.

If you know any other better way to create such hoverable vertical expanding menu then please comment below. I would love to add that here.

The post How to create CSS hoverable side navigation menu appeared first on Parth Patel - a Web Developer.