Today, everybody familiar with Gmail’s sliding effects of inbox left side options navigation. With recent changes, you will find long list of various new options with inbox, send, draft etc. but these new options are hidden by default. These new options displayed whenever user hovers on it. It’s really a very cool technique which like by all.

If you want to implement this sliding menu effect on project, I feel it’s very easy to design same look and feel using CSS3 effects. In this short tutorial, you’ll learn how to design vertical menu with hidden content by default. Once user will hover on it, the CSS transition properties will expand to show more content and also resume defaulting mode after losing focus. You can also implement same technique using jQuery UI easing effects, but CSS3 is best option as you haven’t need any third party library. So follow the simple steps to design Gmail like expanding CSS3 navigation menu.

After expanding navigation

Live Demo


Design Menus

Below is HTML for vertical menus which designed using an unordered list of links. The sidebar-menu id is containing CSS properties to handle sidebar menus. The vertical-nav contains CSS to handle menu background, height etc.

  1. <div id=“sidebar-menu”>  
  2.     <div id=“vertical-nav”>  
  3.       <ul>  
  4.         <li><a href=“#”>Home</a></li>  
  5.         <li><a href=“#”>About Us</a></li>  
  6.         <li><a href=“#”>Blog</a></li>  
  7.         <li><a href=“#”>Portfolio</a></li>  
  8.         <li><a href=“#”>Contact Us</a></li>  
  9.         <li><a href=“#”>Download</a></li>  
  10.         <li><a href=“#”>Documentation</a></li>  
  11.         <li><a href=“#”>Career</a></li>  
  12.         <li><a href=“#”>Last Page(maybe)</a></li>  
  13.       </ul>  
  14.     </div>  
  15.   </div>  

Set Navigation Style & Animate with CSS3

Here is complete CSS for vertical CSS. Initially I have fixed height at 175px for vertical navigation layout. The links can expand beyond 175 that’s why these are kept off the page using overflow:hidden CSS properties. The transition properties will only expand once you hover over the navigation. Once your mouse is off that div it will automatically resume the transition effect. It’s really a simple way of writing code because you will only need to declare one set of transitions and CSS3 will handle remaining functionalities.

  1. #sidebar-menu {  
  2.   background#00FFFF;   
  3.   font-family‘Helvetica Neue’HelveticaArialsans-serif;  
  4.   font-size62.5%;   
  5.   color#535353;  
  6.   margin30px 0;  
  7.   displayblock;   
  8.   floatleft;  
  9.   width150px;  
  10.   margin-right20px;  
  11. }  
  12. /* vertical navigation */  
  13. #vertical-nav {  
  14.   background#dbe4ee;  
  15.   displayblock;  
  16.   overflowhidden;  
  17.   height175px;   
  18.   border1px solid #ccc;  
  19.   -webkit-box-shadow: inset 1px -8px 8px -9px rgba(0,0,0,0.7);  
  20.   -moz-box-shadow: inset 1px -8px 8px -9px rgba(0,0,0,0.7);  
  21.   box-shadow: inset 1px -8px 8px -9px rgba(0,0,0,0.7);  
  22.   -webkit-transition: height 0.4s linear;  
  23.   -moz-transition: height 0.4s linear;  
  24.   transition: height0.4s linear;  
  25. }  
  26. #vertical-nav:hover {  
  27.   height300px;  
  28. }  
  30. #vertical-nav ul { list-stylenone; }  
  32. #vertical-nav ul li { displayblockfont-size1.2emfont-weightbold; }  
  34. #vertical-nav ul li a {   
  35.   text-decorationnone;  
  36.   color#3333CC;  
  37.   displayblock;   
  38.   padding8px 5px;   
  39. }  
  40. #vertical-nav ul li a:hover {  
  41.   background#fff;  
  42. }  

Final Thoughts

As we are all aware that the expanding navigation technique is not new and also not developed by Google. But it’s a great example and inspiration for web developers which running an awesome navigation design. Hope, this brief tutorial to design expanding navigation will be useful to other web developers who want to design Gmail like expanding navigation.