Nếu ai đã từng vào trang http://iphone.vinaphone.com.vn/ đều thấy trang này sử dụng 1 thanh menu có hiệu ứng khá đẹp. Ban đầu tôi nhìn vào tôi cứ tưởng đó là flash nhưng xem kỷ lại thì đó không phải là flash mà nó sử dụng 1 đoạn jQuery đơn giản để tạo hiệu ứng trên.
Đầu tiên là phần code HTML
Ta dễ nhận thấy là trong mỗi thẻ li có 2 thẻ a mà không phải 1 thẻ như thông thường. Thẻ a có class là hover sẽ được ẩn đi bởi css và ta sẽ dùng jQuery để hiện lại nó qua đó tạo hiệu ứng
* { margin: 0; padding: 0;}
ul {
background: url(bg-menu.png) repeat-x top center;
margin: 20px auto;
height: 30px; width: 600px;
}
li {
list-style: none;
background: url(sepr.gif) no-repeat right center;
display: inline-block;
overflow: hidden;
float: left;
margin-right:2px;
height: 30px;
}
a {
text-transform: uppercase;
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 0.8em;
padding: 7px 20px;
display: block;
}
a.hover {
margin-top: -30px;
background: url(bg_menu_hover.gif) repeat-x top center;
}
Sau khi style xong, ta sẽ thấy các thẻ a có class hover sẽ nằm phía trên thanh menu (do margin-top là -30px) và bị ẩn (do li có overflow là hidden)
Bây giờ ta sẽ dùng jQuery để kéo a.hover xuống :P
jQuery(document).ready(function(){
$('li').hover(function(){
$(this).find('.hover').stop().animate({'margin-top':'0px'},200);
}, function(){
$(this).find('.hover').stop().animate({'margin-top':'-30px'},200);
});
});
Vậy là ta đã tạo xong 1 thanh menu có hiệu ứng giả flash khá bắt mắt chỉ với 1 đoạn jQuery rất đơn giản
Bạn có thể download demo tại địa chỉ http://www.mediafire.com/?7137q2deqgo6w90
No comments:
Post a Comment
Có thể post link nhaccuatui, youtube, link hình và link mp3
[size="cở chữ"]Chữ[/size], [color="màu chữ"]Chữ[/color]
Chèn Emoticons