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.