Loading data........
Tin nhanh :
Xem Tivi Online

Tổng hợp các kênh giải trí (Đang cập nhật chức năng..)

New Update

Truyền hình SCTV

SCTV14

SCTV15

SCTV16

SCTV17

SCTV18 HD

Vietnam Channels

VTV1

VTV2

VTV3

VTV4

VTV6

VTV9

VTC Online

VTC1

VTC2

VTC3

VTC4

VTC5

VTC6

VTC Online

VTC7

VTC8

VTC9

VTC10

VTC11

VTC12

Truyền hình tp HCM

HTV1

HTV2

HTV3

HTV4

HTV7

HTV9

Radio Channels

VOV1

VOV2

VOV3

VOV4

VOV5

VOV GT-HN

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

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

Menu_demo
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 Smile.
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

Like và chia sẻ với bạn bè :

2 comments:

  1. Bạn ơi bỏ đường dẫn vào nó không lưu trạng thái active mà nó quay lại trạng thái ban đầu, bạn có thể thêm jquery để lưu trạng thái đó được không.

    ReplyDelete
  2. Đoạn Jquery bên dưới là đã lưu trạng thái sau khi click rồi đó, trên trang demo là chưa thêm đoạn này vào đâu. Tải code Demo tại link mediafire bên dưới nhé :)

    ReplyDelete

Bạn có ý kiến thắc mắc hay bình luận gì về bài viết này vui lòng để lại lời nhắn.Cám ơn bạn đã ghé thăm !

 
Proudly powered by Blogger
Copyright © 2009-. The Color Of Life - All Rights Reserved