Xem demo trực tiếp ở đây: http://data.fandung.com/blog/demo/jquery-tab-menu/index.html
- Đầ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.
Cái này cool thật, thanks bạn nhé :)
tuyệt wá Fandung. Thík cái demo, đơn giản, khỏi test. 5 sao nà.
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.
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.
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
@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.
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/
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à.
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
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
dep qua
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
anh fandung oi em muon tao cai menu giong nhu kenh14.vn anh giup em voi ah.cam on anh nhieu
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.
cám ơn anh Dung rất nhiều. toàn những thủ thuật hay và để áp dụng.
bài viết quá hay. admin thật là pro quá. thanks
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
Heh
Thanks
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
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 ạ :(
sao hôm nay không xài được nữa rồi anh...
» 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.