Xem demo trực tiếp ở đây : http://data.fandung.com/blog/demo/menu-jQuery/menujQuery.html
- Để đơn giản, bạn tạo một widget HTML/Javascript và dán tất cả code bên dưới vào:
//Code Javascript
<script src="http://data.fandung.com/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://data.fandung.com/blog/demo/menu-jQuery/jquery.bgpos.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
$('#b a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#c a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
$('#d a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
</script>
// Code CSS
<style type="text/css">
h2 {
clear:both;
padding-top:20px;
}
ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}
li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}
li a {
background:url(http://data.fandung.com/blog/demo/menu-jQuery/img/bg2.jpg) repeat 0 0;
}
li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}
#a a {
background:url(http://data.fandung.com/blog/demo/menu-jQuery/img/bg.jpg) repeat -20px 35px;
}
#b a {
background:url(http://data.fandung.com/blog/demo/menu-jQuery/img/bg2.jpg) repeat 0 0;
}
#c a {
background:url(http://data.fandung.com/blog/demo/menu-jQuery/img/bg3.jpg) repeat 0 0;
}
#d a {
background:url(http://data.fandung.com/blog/demo/menu-jQuery/img/bg4.jpg) repeat 0 0;
}
</style>
//Code HTML
<ul id="a">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
- Chú ý: ở code HTML, bạn hãy thay đổi dòng code màu cam (id="a") tương ứng với style của menu mà bạn chọn trong 4 lọai (a, b, c, d) mà mình có đưa ra trong hình minh họa.
- Sau đó save widget lại, và chi chuyển widget tới vị trí mà bạn muốn hiển thị.
Cái Top Down đẹp quá...mỗi tội buồn ngủ quá rùi..mai dậy test :D
:D
anh dũng ơi..em muốn cho cái menu topdown vào blog nhưng tại em cho cái menu dọc rùi nên cho cái này vào là lỗi
có thể bị trùng tên id trong code CSS đó em
Em có thể đổi lại tên mấy cái id, class trong code CSS xem
Rất ấn tượng
http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gihttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.ghttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gififf
This article feel too good, I like it very much, perhaps I know not of these very deep, but I hope you will soon update your work!!!Hermes kelly handbag
Anh Dũng ơi , chỗ có code CSS và code HTML thì làm sao anh ? Tự mình phải thay vào ah ? Anh gợi ý cho e được không ?
hIHIHIHI . E làm đc rồi . Cảm ơn anh ^^
rất hay thanks bạn nhiều
sao em làm không được anh ơi
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.