Google like menu in jQuery

Caution: Audio may begin with Music!!

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

Click to rate this post!
[Total: 1 Average: 5]
Shares

Recommended Articles

Leave a Reply

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

Pin It on Pinterest

Shares