Create Dropdown Quick Access Menu in CSS and jQuery

When you are designing a large website or web app, Navigation is the important area you should put much effort to make it simple for your users. One of the methods of making your navigation simple is to create a Quick Access Menu which contains the pages your users use 90% of the time. In this tutorial, I will share what I know about creating a drop-down quick access menu ( a hamburger iconic menu) using CSS3 and a little bit of jQuery.

Template For Quick Access Menu

<header class="menu-container">
   <h1 class="menu-container__brand">Quick Access Menu Demo</h1>

   <div class="dropdown-container">
      <a href="#" class="dropdown-container__icon"><i class="fa fa-th"></i></a>

      <div class="dropdown-hide">
         <div class="icon-container">
            <a href='#'>
            <i class="fa fa-home"></i>
            </a>
         </div>

         <div class="icon-container">
            <a href="#">
            <i class="fa fa-envelope"></i>
            </a>
         </div>

         <div class="icon-container">
            <a href="#">
            <i class="fa fa-user"></i>
            </a>
         </div>

         <!-- ADD MORE ICONS IF YOU NEED -->

      </div>
   </div>
</header>

CSS

.menu-container {
    background: #016888;
    padding: 1px;
    box-shadow: 1px 1px 3px #dedede;
    display: flex;
    flex-flow: row wrap;
}

.menu-container__brand {
    color: white;
    margin-left: 5px;
    flex: 1 1 auto;
}

The menu-container class is the parent container of our whole HTML. I am using flexbox for the whole CSS layout in this tutorial.

• Create Fixed Sidebar and Header using CSS3 Flexbox

.dropdown-container {
    align-self: center;
    flex: 0 0 43px;
    position: relative;
}

.dropdown-container__icon {
    font-size: 30px;
    color: white;
}

.dropdown-hide {
    position: absolute;
    background: white;
    border: 1px solid #eee;
    width: 250px;
    right: 12px;
    margin-top: 7px;
    display: flex;
    flex-flow: row wrap;
    padding: 20px;
}

.dropdown-show {
    display: block;
}

The dropdown-container class is set to position: relative; so that the dropdown-hide class, which has the position: absolute property,  will be positioned relative to the dropdown-container class. By default, I want to show the dropdown-container, which is our container of the quick access iconic navigation, by using display: flex; property.

Arrow for the Drop-Down Menu

To make our style more appealing and user-friendly, we can add an arrow on top of the dropdown-hide class so that when the container is opened by a click, It will give us the look of where it has come from.

.dropdown-hide::before {
    position: absolute;
    right: 2px;
    top: -6px;
    transform: rotate(-46deg);
    content: " ";
    width: 0;
    height: 0;
    border-top: 14px solid #fff;
    border-left: 14px solid transparent;
}

The :before pseudo element is added to the dropdown-hide class to create arrows above the container. If you want to know how to create arrows of any direction in CSS, read this post:

• Learn How to Create Arrows using CSS

.icon-container {
    flex: 1 1 auto;
    font-size: 40px;
    color: #008ab5;
    padding: 10px;
}

.icon-container a {
    color: #008ab5;
}

.icon-container a:hover {
    color: #00c1fd;
}

The icon-container class has the flex: 1 1 auto; to equally share the available space in the parent container dropdown-hide. Since I am using font-awesome icons for the menu, I increased the size of icons using font-size property;

Show/Hide Menu using jQuery

$('.dropdown-container__icon').on('click', function() {
   $('.dropdown-hide').toggle('.dropdown-show'); 
});

In the end, You should add a little bit of jQuery to show and hide the menu, the jQuery toggle() function made our life easier to show and hide elements in the DOM. In the above jQuery snippet, I added the click event to the dropdown-container__icon. Inside the click event, I added the toggle() function to dropdown-hide class to show or hide it based on its current state.

Hope it helps, Thank you!