Hiện mình không sử dụng loại menu này nên không có demo!

:016: Bắt đầu nào:
Hình ảnh minh họa:
Sliding image behind menu with jQuery! P110
- Để đơn giản, bạn tạo một widget HTML/Javascript hoặc vào trong Head và dán tất cả code bên dưới vào:

Code:

//Code Javascript
<script src="http://winni.110mb.com/menu-jQuery/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://winni.110mb.com/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://winni.110mb.com/menu-jQuery/bg2.jpg) repeat 0 0;
}
li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}
#a a {
background:url(http://winni.110mb.com/menu-jQuery/bg.jpg) repeat -20px 35px;
}
#b a {
background:url(http://winni.110mb.com/menu-jQuery/bg2.jpg) repeat 0 0;
}
#c a {
background:url(http://winni.110mb.com/menu-jQuery/bg3.jpg) repeat 0 0;
}
#d a {
background:url(http://winni.110mb.com/menu-jQuery/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.
- Nên lưu các file js lại tránh trường hợp Winni xóa hoặc thay đổi link làm ảnh hưởng đến bạn!
- Sau đó save lại.
Nguồn snook, Fandung
Chúc các bạn thành công.