Google like menu in jQuery

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

Include jquery library
Create an 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 for 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 );            
                  
                });
            
          });
});

That’s all folks!!