Tạo thanh menu ngang với hiệu ứng từ jQuery

Sliding image behind menu with jQuery

[FD BlOg] - Tiếp tục bổ xung rồi kho các style menu của blog FD, lần này mình sẽ giới thiệu một style menu nằm ngang đơn giản, với hiệu ứng của jQuery.

Xem demo trực tiếp ở đây : http://data.fandung.com/blog/demo/menu-jQuery/menujQuery.html

Hình ảnh minh họa:

- Để đơ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ị.

Nguồn snook

Chúc các bạn thành công.