Laman

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

0   nhận xét

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/AVvXsEjNxP9I7kY6FJJ4J5yL9EpmjKoOLoxPipGDPPURPCdZxbXVI_Nf_PuOsAjRPtttbGRoY5IyzBeF7n19iDQAGlR2yEDRIi1C9VPo8ms-Swi239QWzfobi1wxl0eoJFMh6SU4u5KQ7z6BnWUX/s1600/vivaverdemenu.png) repeat-x left top;}
ul#topnav.v2 a{ color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNxP9I7kY6FJJ4J5yL9EpmjKoOLoxPipGDPPURPCdZxbXVI_Nf_PuOsAjRPtttbGRoY5IyzBeF7n19iDQAGlR2yEDRIi1C9VPo8ms-Swi239QWzfobi1wxl0eoJFMh6SU4u5KQ7z6BnWUX/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.
Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D

Subscribe to: Post Comments ( Atom )