Google like menu in jQuery

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 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!!

Hit Like if this article was useful to you!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Leave a Reply

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