Loading post navigation ...
 
 

Pro page

22
Nhận xét

Tab Menu cực cool cho blog với jQuery

| by Phan Dũng | views

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

Create Tabbed Side Menu with jQuery
[FD BlOg] - Một ứng dụng khác từ jQuery, bài viết sẽ hướng dẫn các bạn tạo tab menu, với 5 tab con chứa nội dung. Và tiêu để của các tab sẽ được biểu thị bằng hình ảnh.
Xem demo trực tiếp ở đây: http://data.fandung.com/blog/demo/jquery-tab-menu/index.html

Hình minh họa :



- Đầu tiên các bạn download gói hình ảnh của thủ thuật về máy, rồi up lên host để sử dụng cho thủ thuật. (images.rar)
Để đơn giản, ta sẽ chép tất cả code của thủ thuật vào 1 widget HTML/Javascript.
- Tạo widget HTML/Javascript ở nơi muốn đặt tab
- Dán tất cả code bên dưới vào:

//Code Javascript
<script src="http://data.fandung.com/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {


//Get all the LI from the #tabMenu UL
$('#tabMenu > li').click(function(){

//remove the selected class from all LI
$('#tabMenu > li').removeClass('selected');

//Reassign the LI
$(this).addClass('selected');

//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass('mouseover');
$(this).removeClass('mouseout');

}).mouseout(function() {

//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');

});

//Mouseover with animate Effect for Category menu list
$('.boxBody #category li').mouseover(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('.boxBody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});

});

</script>

// Code CSS
<style>

#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}
li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}
li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(images/boxTop.gif) no-repeat;height:11px;clear:both}
*html .boxTop {margin-bottom:-2px;}
.boxBody {background-color:#282828;}
.boxBottom {background:url(images/boxBottom.gif) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(images/arrow.gif)}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}
</style>

// Code HTML
<div class="box">

<ul id="tabMenu">
<li class="posts selected"></li>
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>

<div class="boxTop"></div>

<div class="boxBody">

<div id="posts" class="show">
<ul>
<li>Post 1.</li>
<li>Post 2.</li>
<li>Post 3.</li>
<li class="last">Post 4.</li>
</ul>
</div>

<div id="comments">
<ul>
<li><a>Commet 1. <span> - Author 1</span></a></li>
<li><a>Commet 2. <span> - Author 2</span></a></li>
<li><a>Commet 3. <span> - Author 3</span></a></li>
<li class="last"><a>Commet 4. <span> - Author 4</span></a></li>
</ul>
</div>

<div id="category">
<ul>
<li><a href="#">css-html</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">logo</a></li>
<li class="last"><a href="#">Blogger</a></li>
</ul>
</div>

<div id="famous">
<ul>
<li>List famous 1.</li>
<li>List famous 2.</li>
<li>List famous 3.</li>
<li class="last">List famous 4.</li>
</ul>
</div>

<div id="random">
<ul>
<li>Random post 1.</li>
<li>Random post 2.</li>
<li>Random post 3.</li>
<li class="last">Random post 4.</li>
</ul>
</div>

</div>

<div class="boxBottom"></div>

</div>

- Chú ý : các class "posts, comments, category, famous, random" là các tiêu đề của 5 tab. Và để ý ta thấy ở class posts có thêm dòng selected, dòng này để mặc định tab "posts" sẽ hiển thị mỗi lần load.
- Dòng code : .box {width:227px} : là độ rộng của tab chính.

-Save widget.

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


Enter your mail address:

22

Comedown

Cái này cool thật, thanks bạn nhé :)

__Tk__

tuyệt wá Fandung. Thík cái demo, đơn giản, khỏi test. 5 sao nà.

ditchaiok

Em add vao Blog nhung may cais hinh nay khong hien: http://img39.imageshack.us/img39/1574/41780005.png

Anh co cach nao giup em hien thi hoac chi em cach bo background do di.

fandung

mấy cái hình đó chạy bình thường mà, tốt nhất em down mấy cái hình đó về rồi up lên host khác để lấy link.

Còn cái hình background thì em xem code CSS bên dưới sẽ rõ:


.boxTop {background:url(http://fandung.110mb.com/jquery-tab-menu/images/boxTop.gif) no-repeat;height:11px;clear:both}
.boxBottom {background:url(http://fandung.110mb.com/jquery-tab-menu/images/boxBottom.gif) no-repeat;height:11px;}

.boxBody {background-color:#282828;}



#282828 chính là màu nền đó. Còn các link ảnh chính là ảnh nền ở phía trên và dưới. Nếu em muốn bỏ hình nền thì thay thế(hoặc xóa) 2 link ảnh đó đi, rồi đổi lại màu nền là được.

ditchaiok

http://www.4zu.us/2009/06/michael-jackson.html
Em dán vô blog rùi mà mấy cái hình k0 hiện lên.
Anh xem dùm em với

fandung

@ditchaiok : có thể là do mấy cái hình ở host của anh load ko tốt, em thử down mấy cái hình này về rồi up lên host khác xem sao.

Jeffy

Bạn coi dùm mình khi mình làm thì nó ra vậy nè , mình down hình của bạn và bỏ vào host khác nó cũng vậy , thay cái của bạn vào nó cũng vậy luôn , buồn quá . Toàn cái mình thích không ah ! PD giúp mình với .


http://hungkhung.blogspot.com/

fandung

lạ nhỉ, cái này hồi trước mình có test trên blog test của mình rồi, hiển thị được mà.

Phạm Hoàng

Oh ! bài viết hay
Thank nhìu! mình đang tìm cách "mã hóa" web lại bằng các dòng lệnh chứ ko còn thích làm bằng flash nữa ;))
http://mp3ebay.com/ ... đang làm dở chưa dám cho view home pages đc hehe

Khách (ẩn danh)

Ai có code tích hợp cho bo-blog ko? share cho em với, nếu được thì em thanks nhìu. Mail: phucthai.ent3@gmail.com

cafe Sound

dep qua

Đại Hạnh

Mình chèn tab vào gần cuối trang, khi click vào tab thì trang web lại nhảy lên đầu trang, có cách nào sửa không vậy???
thnks

thuvientructuyen

anh fandung oi em muon tao cai menu giong nhu kenh14.vn anh giup em voi ah.cam on anh nhieu

ruou sam

nếu bạn dán hình ko nên, bạn có thể tìm hình khác mà bạn thích và dán lại là đươc ah. mình cũng gặp tình trạng này.

cao linh chi

cám ơn anh Dung rất nhiều. toàn những thủ thuật hay và để áp dụng.

download film

bài viết quá hay. admin thật là pro quá. thanks

KN 40A

cái code js cảu anh có sử dụng được không anh mà anh có biết trang nào up code js ko anh

Khách (ẩn danh)

Heh

Khách (ẩn danh)

Thanks

leanhtuan

anh ơi e dán rồi nó ko chia từng mục muk thành cột dài dài ak...
http://vnforumgame.blogspot.com/
anh zô xem rùi cho e giúp e với nha a

Chíp Đẹp Zai

anh ơi
http://data.fandung.com/js/jquery-1.3.1.min.js
cái này xài của anh luôn ạ?
làm sao em có thể tự tạo một js của web mình dược ạ >.<
web em đây http://groupfreestyle.blogspot.com/
anh có thể làm cho em được ko ạ :(

Vũng Tàu Trường Hải

sao hôm nay không xài được nữa rồi anh...



☺ 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