Tạo thanh menu động sử dụng jQuery

Người đăng: buonkhongem on Thứ Hai, 22 tháng 11, 2010

Thư viện jQuery có thể giúp ích nhiều trong việc tạo ra các thanh menu cho trang web. Dưới đây là một kiểu menubar có sử dụng thư viện jQuery.

Xem Demo.

Để tạo được thanh menu như thế này, bạn thực hiện theo các bước sau đây.

1. Đặt phần code CSS và Javascript sau đây vào trước thẻ </head>
<style type='text/css'>
ul#topnav {
margin: 0px 0px;
padding: 0px;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 620px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 28px;
float: left;
text-decoration: none;
color: green;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: green; }
ul#topnav span { display: none;}
ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLluKJwg2JP-JFVBHaLs4bnYw3W5iAZ8MlZNekS7M0vzZNA8sAADdBZRfGj03W2EXKTjp0hDWZ4pIlbctwLZsw2qg4Gof4WR_mxyKVLpYLNRXe0wosnq47EQP-QoVQSmfoUKJQGqOTw51b/s1600/vivaverdemenu.png) repeat-x left top;}
ul#topnav.v2 a{ color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLluKJwg2JP-JFVBHaLs4bnYw3W5iAZ8MlZNekS7M0vzZNA8sAADdBZRfGj03W2EXKTjp0hDWZ4pIlbctwLZsw2qg4Gof4WR_mxyKVLpYLNRXe0wosnq47EQP-QoVQSmfoUKJQGqOTw51b/s1600/vivaverdemenu.png) repeat-x left bottom;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});

$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});

});
</script>
Những phần được đánh dấu màu đỏ là chỗ bạn có thể điều chỉnh cho phù hợp với ý thích của mình.

2. Thiết lập cấu trúc HTML như bên dưới và đặt vào giữa 2 thẻ <body>, </body>.
<ul class='v2' id='topnav'>
<li><a href='http://yourblog.blogspot.com'>Home</a></li>
<li><a href='/gioi-thieu.html'>Giới thiệu</a></li>
<li><a href='/quy-dinh.html'>Quy định</a></li>
<li><a href='/lien-he.html'>Liên hệ</a></li>
<li><a href='/dien-dan.html'>Diễn đàn</a></li>
<li><a href='/lien-ket.html'>Liên kết</a></li>
</ul>
Bạn cần thay đổi những phần được đánh dấu màu xanh theo các liên kết tương ứng.

{ 0 nhận xét... read them below or add one }

Đăng nhận xét