• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

2
22/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(http://3.bp.blogspot.com/_YGpl3rQPSzI/TKIfkzYBI9I/AAAAAAAAQh8/lE8G2XtHCMw/s1600/vivaverdemenu.png) repeat-x left top;}
ul#topnav.v2 a{ color: #fff;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TKIfkzYBI9I/AAAAAAAAQh8/lE8G2XtHCMw/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.

{2 bình luậnAdd yours ?}

23:24:00, 14 thg 3, 2011

cho mình hỏi nếu muốn thay nền màu trắng trong menu bằng màu khác để trùng với phông nền site thì phải chỉnh ở đâu bạn

Reply
01:08:00, 31 thg 3, 2011

Bạn muốn đổi màu thì chỉnh lại cái này nha ;
ul#topnav.v2 span{
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TKIfkzYBI9I/AAAAAAAAQh8/lE8G2XtHCMw/s1600/vivaverdemenu.png) repeat-x left top;}
ul#topnav.v2 a{ color: #fff;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TKIfkzYBI9I/AAAAAAAAQh8/lE8G2XtHCMw/s1600/vivaverdemenu.png) repeat-x left bottom;

bạn đổi thành
ul#topnav.v2 span{
background: #CCFFFF}
ul#topnav.v2 a{ color: #000033;
background: #FF0000;
la ok!

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn