Google apps style navigation

I have seen different types of navigation menu styles for websites and apps. But the most user friendly menu style I have come across is google apps style navigation.

An example app that I can refer is gmail app and an example website I can give is google store



Lets see how to make it. Another thing I want to mention is that I have used bootstrap css framework to ease some of css styles.

Also check out full page navigation style that has been published earlier to this.

1. Making a top navigation bar 

    I am sure most of us would have gone through bootstrap documentation for making a fixed top navigation bar. The below code will make a navigationbar fixed top.

HTML for making bootstrap navigation

<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
 <ul class="nav navbar-nav">
 <li><button type="button" class="toggleMenu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
  </button>
 </li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
    </div>
</div>
<div class="container">
  <h1>Rise And Shine</h1>
</div>

CSS for the above step (navigation)

.bar {
    display:block;
    width:15px;
    padding:2px;
    margin:2px;
    border-radius:2px;
    background-color:#444; 
}

body {
 padding-top:60px;
 background-color:#ff6666;
}
.navbar .toggleMenu {
    margin-top:10px;
}

2. Making left navigation or sidemenu 

The idea of left navigation is hidden by default and show only when toggle buttons are clicked and keep its width to 250px. Any smart device nowadays has minimum width of 250px;

HTML for making the left sidebar navigation

<div class="sidemenu hidden">
<div class="profile-holder">
<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object img-circle" src="http://placehold.it/50x50" />
    </a>
  </div>
  <div class="media-body media-middle">
    <h3>My Profile<span class="pull-right toggleMenu" style="cursor:pointer;">&times;</span></h3>
  </div>
</div>
</div>
<div>
<ul class="nav nav-stacked">
    <li><a class="list-link" href="#"> <span class="glyphicon glyphicon-stats list-icon"></span>Orders History</a></li>
    <li><a class="list-link" href="#"><span class="glyphicon glyphicon-flash list-icon"></span>Latest Devices</a></li>
    <li><a class="list-link" href="#"><span class="glyphicon glyphicon-globe list-icon"></span>Help</a></li>
</ul>
</div>
</div>

CSS for sidebar navigation 

.sidemenu{
 position:fixed;
 top:0;
 left:0;
 background-color:#fff;
 height:100%;
 width:250px;
 z-index:1032;
 border-right:1px solid #ddd;
 
}
.sidemenu .profile-holder {
 padding:10px 15px;
 background-color:#eaeaea;
}

.sidemenu ul li{
 width:100%;
}
.sidemenu ul li a.list-link {
 padding:20px 15px;
}

.sidemenu .list-icon {
 padding-right:15px;
}

3. Making a mask

 Mask is shown when sidemenu is opened, this helps user to focus on the menu items.

HTML 

<div class="mask hidden">
</div>

CSS for making mask

.mask {

 position:fixed;

 z-index:1031;

 top:0;

 left:0;

 width:100%;

 height:100%;

 background-color:#222;

 opacity:0.1;

}

4. Adding actions for the buttons(javascript )

Using jquery, add actions for the togglemenu button. 

Idea is like this. 

__sidemenu is initially hidden (with help of css class hidden)

__open sidemenu if togglemenu is clicked (just remove the css class hidden)

__close sidemenu if menuclose button is clicked

__close sidemenu if users intention is go back to main content (i.e click action on the mask)

$(function() {
 var sidemenu = $('.sidemenu');
 var mask     = $('.mask');
 $('.toggleMenu,.mask').click(function(){
  if(sidemenu.hasClass('hidden')) {
   sidemenu.removeClass('hidden');
      // Show mask when sidemenu opened
   mask.removeClass('hidden');
  }
  else {
   sidemenu.addClass('hidden');
   // Remove mask when no sidemenu
   mask.addClass('hidden');
  }
 });
});