Google beta 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 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;
}

Now the Jquery to perform magic

$(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