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>
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>.
More about →
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/AVvXsEjq4josoWwerc6NDAXeMSdKyXT-7qbQwPDKRGtGJsrtBMY4Y7y5HZqYEr0HZYDUa9pE7HgFsFBdDkuyevEE9Rl6jEGCIe_50aTQSregWQt_2WkPxGxIG2GyYqR9oStrG2-tNzccJNUWkpcH/s1600/vivaverdemenu.png) repeat-x left top;}
ul#topnav.v2 a{ color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq4josoWwerc6NDAXeMSdKyXT-7qbQwPDKRGtGJsrtBMY4Y7y5HZqYEr0HZYDUa9pE7HgFsFBdDkuyevEE9Rl6jEGCIe_50aTQSregWQt_2WkPxGxIG2GyYqR9oStrG2-tNzccJNUWkpcH/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.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/AVvXsEjq4josoWwerc6NDAXeMSdKyXT-7qbQwPDKRGtGJsrtBMY4Y7y5HZqYEr0HZYDUa9pE7HgFsFBdDkuyevEE9Rl6jEGCIe_50aTQSregWQt_2WkPxGxIG2GyYqR9oStrG2-tNzccJNUWkpcH/s1600/vivaverdemenu.png) repeat-x left top;}
ul#topnav.v2 a{ color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq4josoWwerc6NDAXeMSdKyXT-7qbQwPDKRGtGJsrtBMY4Y7y5HZqYEr0HZYDUa9pE7HgFsFBdDkuyevEE9Rl6jEGCIe_50aTQSregWQt_2WkPxGxIG2GyYqR9oStrG2-tNzccJNUWkpcH/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>
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.<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>
