HƯớng dẫn tạo 1 menu sử dụng jquery

Hôm  nay đơn giản là rảnh rỗi ko có việc gì làm nên viết 1 bài demo cách tạo 1 menu bằng css và sử dụng JQuery để xác định trạng thái menu sau khi click. Đây không phải là điều gì mới mẻ song đối với nhiều bạn mới bắt đầu lập trình thì cũng phải loay hoay mất khá nhiều thời gian .
Các bạn có thể xem DEMO trước tại đây
Code html tạo menu:

<nav role="navigation">
            <ul id="menu">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Store</a></li>
                <li><a href="#" >Mac</a></li>
                <li><a href="#">iPod</a></li>
                <li><a href="#">iPhone</a></li>
                <li><a href="#">iPad</a></li>
                <li><a href="#">iTunes</a></li>
                <li><a href="#">Support</a></li>
                <li>             
                        <input type="search" results=5 placeholder="search..." name="q">
                        <input type="submit" value="search">
                 
                </li>
            </ul>
        </nav>

Tạo style cho menu bằng CSS

html, body, ul, li, a, form, input {
    margin: 0;
    padding: 0;
} 

body {
    background: #f2f2f2;
}

nav[role="navigation"] {
    display: table;
    width: 970px;
    margin: 20px auto;
    vertical-align: middle;
    font-family: "Lucida Grande", sans-serif;
    background: #888;
    background-image: -moz-linear-gradient(top, #888888 0%, #717171 50%, #5E5E5E 51%, #787878 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888888), color-stop(50%,#717171), color-stop(51%,#5E5E5E), color-stop(100%,#787878));
    border-top: 1px solid #7b7b7b;
    border-bottom: 1px solid #565656;
    border-left: none;
    border-right: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -webkit-transition: width .3s ease-in-out;
    -moz-transition: width .3s ease-in-out;
    -o-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    
}

nav[role="navigation"] ul {
    list-style-type: none;
    display: table-row;
}

nav[role="navigation"] li {
    display: table-cell;
    vertical-align: middle;
}

nav[role="navigation"] a {
    text-decoration: none;
    color: #fff;
    display: block;
    font-size: .78em;
    font-weight: 600;
    text-shadow: 
        0 -1px 0 rgba(30,30,30,.5), 
        0 2px 1px rgba(50,50,50,.5);
    border-right: 1px solid rgba(56,56,56, .5);
    -webkit-box-shadow: 
        inset -1px 0 0 rgba(225,225,225,.2), 
        inset 1px 0 0 rgba(225,225,225,.2);
    -moz-box-shadow: 
        inset -1px 0 0 rgba(225,225,225,.2), 
        inset 1px 0 0 rgba(225,225,225,.2);
    box-shadow: 
        inset -1px 0 0 rgba(225,225,225,.2),
        inset 1px 0 0 rgba(225,225,225,.2);
    padding: 0 30px;
    line-height: 34px;
}

nav[role="navigation"] a:hover {
    background: rgba(11,11,11, .55);
    -webkit-box-shadow: inset 0 0 15px rgba(180,180,180,.3);
    -moz-box-shadow: inset 0 0 15px rgba(180,180,180,.3);
    box-shadow: inset 0 0 15px rgba(180,180,180,.3);
}

nav[role="navigation"] a:active {
    background: rgba(35,35,35,.6);
    -webkit-box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
    -mox-box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
}

nav[role="navigation"] li:first-child a {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-size: 16px;
    font-weight: normal;
    font-family: EvilzRegular;
}

nav[role="navigation"] a.active {
    background: rgba(71,71,71, .9);
    -webkit-box-shadow: 
        inset -10px 0 25px rgba(0,0,0,.2),
        inset 10px 0 20px rgba(0,0,0,.2),
        inset 0px 0px 20px rgba(0,0,0,.2),
        inset 0px 10px 20px rgba(0,0,0,.2);
    -moz-box-shadow: 
        inset -10px 0 25px rgba(0,0,0,.2),
        inset 10px 0 20px rgba(0,0,0,.2),
        inset 0px 0px 20px rgba(0,0,0,.2),
        inset 0px 10px 20px rgba(0,0,0,.2);
    box-shadow: 
        inset -10px 0 25px rgba(0,0,0,.2),
        inset 10px 0 20px rgba(0,0,0,.2),
        inset 0px 0px 20px rgba(0,0,0,.2),
        inset 0px 10px 20px rgba(0,0,0,.2);
}

input[type="search"] {
    background: rgba(155,155,155,.1);
    border: none;
    margin-left: 10px;
    padding: 3px 4px 3px 5px;
    width: 120px;
    font-size: .7em;
    cursor: pointer;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 
        inset 0 1px 0 rgba(43,43,43,.7), 
        inset 0 -1px 0 rgba(150,150,150, .7);
    -moz-box-shadow: 
        inset 0 1px 0 rgba(43,43,43,.7), 
        inset 0 -1px 0 rgba(150,150,150, .7);
    box-shadow: 
        inset 0 1px 0 rgba(43,43,43,.7), 
        inset 0 -1px 0 rgba(150,150,150, .7);
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    -webkit-appearance:none;
}

input[type="search"]:focus {
    background: rgba(255,255,255,.9);
    outline: none;
}

nav[role="navigation"] input[type="submit"] {
    display: none;
}

li:last-child input:focus {
    width: 170px;
}

::-webkit-input-placeholder {
    text-shadow: 0 1px 0 rgb(0,0,0);
    font-size: .95em;
    color: rgba(255,255,255,.7);
}

input:-moz-placeholder {
    text-shadow: 0 1px 0 rgb(30,30,30);
    font-size: .75em;
    color: rgba(255,255,255,.7);
}

Cuối cùng sử dụng JQuery để xác định trạng thái cho Menu sau khi selected.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

    <script language="javascript">
        $(document).ready(function() {
            $("#menu li a").click(function() {
                $("#menu li a").removeClass("active");
                $(this).addClass("active");
            });
        });
    </script>

Code download:

http://www.mediafire.com/?lousk4vn9jn41w9

support by : Love4all1080