Jquery Tab Menu Tutorial

Live Preview

hi guys...sorry im late again...got an exams in the last two weeks ,so little busy to create new post...yeah but somehow i managed to finishing the exams(i hope the result in very very goood...:P).
ah i almost forgot...for what reason i am being here...yeah to give you a little trick to beautify our template.look at the screensgot above and the Live Preview too,the name is Jquery TabMenu, cuz we will using jquery again.

in this TabMenu u can put anything (in HTML Of course)like links,comment,shoutbox and many more, and of course...with this tabMenu ur template will be a litle simple ^.^.

Now...Lets Start
First
Open ur template Edit HTML page....and found this code:

and paste this CSS code above it

» Click to show CSS Code - click again to hide... «

/*Jquery TabMenu*/

#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(http://i191.photobucket.com/albums/z269/ziegey/tabComment.gif) no-repeat 0 -32px;}

li.posts {background:url(http://i191.photobucket.com/albums/z269/ziegey/tabStar.gif) no-repeat 0 -32px;}

li.category {background:url(http://i191.photobucket.com/albums/z269/ziegey/tabFolder.gif) no-repeat 0 -32px;}

li.famous {background:url(http://i191.photobucket.com/albums/z269/ziegey/tabHeart.gif) no-repeat 0 -32px;}

li.random {background:url(http://i191.photobucket.com/albums/z269/ziegey/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(http://i191.photobucket.com/albums/z269/ziegey/boxTop.gif) no-repeat;height:11px;clear:both}

*html .boxTop {margin-bottom:-2px;}

.boxBody {background-color:#282828;}

.boxBottom {background:url(http://i191.photobucket.com/albums/z269/ziegey/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(http://i191.photobucket.com/albums/z269/ziegey/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;}

and again paste this js below

» Click to show JS Code - click again to hide... «

<script type="text/javascript" src="http://www.geocities.com/ziegey_clonesphare/jquery-1.3.1.min.js"></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>

NOTE:see the url jquery above that script...Download that and reupload to ur hosting for safety,cuz im not responsible if that file will be deleted from my geocities account

Save ur template and go to page element...add new gadget and choose HTML/javascript
Now the last u need to do....(sigh..finally)
paste this code to it...

» Click to show HTML Code - click again to hide... «

<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><a href="http://www.ziegey-sharing.com/2009/06/rapidshare-recruitment-of-new-customers.html">Rapidshare Recruitment New Customer</a></li>

<li><a href="http://www.ziegey-sharing.com/2009/06/horizontal-accordeon-slide-tutorial.html">Horizontal Accordeon Slide Tutorial</a></li>

<li><a href="http://www.ziegey-sharing.com/2009/06/spoiler-and-code-tutorial.html">Spoiler and Code Tutorial</a></li>

<li><a href="http://www.ziegey-sharing.com/2009/05/object-dock-navigation-tutorial.html">Object Dock Navigation</a></li>

<li><a href="http://www.ziegey-sharing.com/2009/05/blogspot-templatedota-allstars.html">BlogSpot Template Dota Allstars</a></li>

<li><a href="http://www.ziegey-sharing.com/2009/05/create-blog-tabslide-navigation.html">TabSlide Navigation</a></li>

<li><a href="http://www.ziegey-sharing.com/2009/05/blogspot-templateuchiha-brothers.html">Blogspot Template Uchiha Brothers</li>

<li><a href="http://www.ziegey-sharing.com/2009/05/chaos-legion-pc-free-download.html">Chaos Legion PC Download</li>

</ul>

</div>



<div id="comments">

<center><!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe scrolling="auto" width="225" frameborder="0" src="http://www4.shoutmix.com/?ziegey" height="400" title="ziegey">

<a href="http://www4.shoutmix.com/?ziegey">View shoutbox</a>

</iframe>

<br/>

<!-- End ShoutMix --></center>

</div>



<div id="category">

<ul>

<li><a href="http://www.ziegey-sharing.com/search/label/Anime">Anime</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Download">Download</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Friendster">Friendster</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Games">Games</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Info">Info</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Layout">Layout</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Music">Music</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/news">News</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Programs">Programs</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Template">Template</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/tips%20nTricks">Tips n Tricks</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Tutorial">Tutorial</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Video">Video</a></li>



</div>



<div id="famous">

<ul>

<li><a href="http://www.ziegey-sharing.com/2009/04/last-remnant-pc-free-download.html">The Last Remnant Download</a></li>

<li><a href="http://www.ziegey-sharing.com/2009/04/x-men-origins-wolverine-download.html">X-Men Origins:Wolverine Download</a></li>

<li><a href="http://www.ziegey-sharing.com/2009/04/last-remnant-ost-free-download.html">The Last Remnant OST</a></li>

<li><a href="http://www.ziegey-sharing.com/2009/04/new-in-pcsx-0.html">PS2 Emulator 0.96</a></li>

<li><a href="http://www.ziegey-sharing.com/2009/05/chaos-legion-pc-free-download.html">Chaos Legion PC Download</a></li>

</ul>

</div>



<div id="random">

<ul>

<li><a href="http://www.ziegey-sharing.com">Home</a></li>

<li><a href="http://www.facebook.com/ziegey">My Facebook</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Video">Ziegey Movie Drive</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Music">Ziegey Music drive</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Games">Ziegey Game Drive</a></li>

<li><a href="http://www.ziegey-sharing.com/search/label/Tutorial">Ziegey Tutorial Drive</a></li>

</ul>

</div>

</div>

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

</div>

u can change the content if u want(see the Green text),for example i change the comment tab with shoutmix script,save ur gadget if ur finished...and....taraaaaa....enjoy ur tabmenu
Thx To http://www.1stwebdesigner.com
See Other Tutorial
Object Dock Navigation
Tabslide Navigation
Spoiler And Code Tutorial
Horizontal Accordeon Slide Tutorial

Tags: Tutorial, Tips, Trick, Javascript, CSS, HTML, Blogger