Lion Menu

by Umar

HTML

<nav>
        <ul id="menu">
            <li><a>List</a></li>
            <li><a>Grid</a></li>
            <li><a>Coverflow</a></li>
        </ul>
    </nav>

CSS

* {margin:0px; padding:0px}
        
        body {font-family:"Lucida Grande", "Helvetica", "Sans-Serif"}
        
        nav {
        background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#b3b3b3));
        width:100%;height:50px;
        -webkit-border-radius:5px;
        margin:20px auto}
        
        #menu {
        overflow:hidden;
        background: -webkit-gradient(linear, left top, left bottom, from(#a1a1a1), to(#cecece));
        -webkit-box-shadow:
            inset 0px 2px 5px #757575,
            0px 1px 0px #b2b2b2,
            0px 2px 0px #cecece,
            0px -1px 0px #757575;
        position: relative;
        float: left;
        margin-top:16px;
        -webkit-border-radius:4px;
        margin-left:20px;
        padding:0px 1px;}
        
        #menu li {
        float: left;
        list-style: none}
        
        #menu li a {
        color: #222;
        text-shadow:0px 1px 0px #dfdfdf;
        z-index: 2;
        position: relative;
        cursor: pointer;
        float: left;
        font-size: 13px;
        font-family: helvetica, arial, sans-serif;
        text-decoration: none;
        padding:4px 14px;
        width: 100%}
        
        #active {
        -webkit-border-radius:3px;
        background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#c1c1c1));
        -webkit-box-shadow:0px 0px 3px #767676;
        position: absolute;
        z-index: 1}

JavaScript

/* Basic Lion Menu Plugin v0.2 by www.inlovewithcss.com */

    $.fn.lionMenu = function() {
        
        nav = this,
        currentPageItem = this.children(":first");
                 
        $('<li id="active"></li>').css({
            width : currentPageItem.outerWidth(),
            height : currentPageItem.outerHeight(),
            left : currentPageItem.position().left,
            top : currentPageItem.position().top,
        }).appendTo(this);
                      
        $('li:not(#active)').click(function() {
            $('#active').animate(
                {
                    left : $(this).position().left,
                    width : $(this).width()
                }, 200
            );
        });    
    };

    $('#menu').lionMenu();