Google like menu in jquery

Tags: jQuery
Rate this post to improve.

I just love google’s new look, especially the menus in Beta version. have you noticed the border that appears for each link which you have selected?. Well lets learn how to create one such fantastic vertical menu button using jquery and css.

Include jquery library

create a HTML page and few link texts

<div id="menu">
  <div class="normal"> Everything </div>
  <div class="normal"> Images </div>
  <div class="normal"> Maps </div>
</div>

Write a little css fo the same

.normal{ 
  width:100px; height:30px; 
  margin:5px; padding:5px 5px 5px 15px; 
  background: #FFFFF; 
  text-align:left; 
  border:#fff solid 5px; 
  cursor:pointer;   
}

.clicked{ 
  width:100px; height:30px; 
  margin:5px; padding:5px 5px 5px 15px; 
  background: #FFFFF; color:#FF0000;
  text-align:left; 
  border-left:#00cc00 solid 5px; 
  cursor:pointer; 
}

vertical menu using jquery

$(document).ready(function () {
      
      $("#menu > div").each(function() {
            
            $("#menu > div").click(function() {
                  
                  $("#menu > div").removeClass("clicked");
                  $(this).addClass("clicked").animate({ borderLeftWidth: "5px" }, 1500 );            
                  
                });
            
          });
});

 

Thats it guys!!

Please subscribe if found useful  and click on other links to see more cool codes  🙂

DEMO LOOK:

Google beta Menu

 

Code Snippets UX-UI

Join Discussion

Your email address will not be published. Required fields are marked *

All code will be displayed literally.