Loading post navigation ...
 
 

Pro page

11
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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.


Enter your mail address:

11

lethuan

Cái Top Down đẹp quá...mỗi tội buồn ngủ quá rùi..mai dậy test :D

fandung

:D

Le Thuan

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

fandung

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

Thanh_Binh

Rất ấn tượng

Khách (ẩn danh)

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

byebye

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

Fiona

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 ?

Fiona

hIHIHIHI . E làm đc rồi . Cảm ơn anh ^^

Khách (ẩn danh)

rất hay thanks bạn nhiều

Unknown

sao em làm không được anh ơi



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» 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.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home