Cara Membuat Menu Tab dengan jQuery

Full Version

Jika pada postingn sebelumnya kita telah membuat menu tab, maka pada postingan ini juga akan membahas membuat menu tab yang bisa dikatakan lebih keren lagi yaitu dengan jQuery.

menu tab dengan jQuery

 Jika sobat berminat ikuti langkah-langkah di bawah ini.

1. Login ke blogger atau klik disini»
2. Pilih template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand widget template.
4. Cari code di bawah ini (tekan ctrl+F untuk mempermudah pencarian).

</head>

5. Setelah ketemu copy script di bawah ini dan letakkan di atas code di atas.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

6. Kemudian copy paste script di bawah ini dan letakkan di bawah code </head>

<script type='text/javascript'>
$(document).ready(function() {
//Get all the LI from the #tabMenu UL
$(&#39;#tabMenu &gt; li&#39;).click(function(){
//perform the actions when it&#39;s not selected
if (!$(this).hasClass(&#39;selected&#39;)) {
//remove the selected class from all LI
$(&#39;#tabMenu &gt; li&#39;).removeClass(&#39;selected&#39;);
//Reassign the LI
$(this).addClass(&#39;selected&#39;);
//Hide all the DIV in .boxBody
$(&#39;.boxBody div&#39;).slideUp(&#39;1500&#39;);
//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$(&#39;.boxBody div:eq(&#39; + $(&#39;#tabMenu &gt; li&#39;).index(this) + &#39;)&#39;).slideDown(&#39;1500&#39;);
}
}).mouseover(function() {
//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass(&#39;mouseover&#39;);
$(this).removeClass(&#39;mouseout&#39;);
}).mouseout(function() {
//Add and remove class
$(this).addClass(&#39;mouseout&#39;);
$(this).removeClass(&#39;mouseover&#39;);
});
//Mouseover with animate Effect for Category menu list
$(&#39;.boxBody #category li&#39;).click(function(){
//Get the Anchor tag href under the LI
window.location = $(this).children().attr(&#39;href&#39;);
}).mouseover(function() {
//Change background color and animate the padding
$(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);
$(this).children().animate({paddingLeft:&quot;20px&quot;}, {queue:false, duration:300});
}).mouseout(function() {
//Change background color and animate the padding
$(this).css(&#39;backgroundColor&#39;,&#39;&#39;);
$(this).children().animate({paddingLeft:&quot;0&quot;}, {queue:false, duration:300});
});
//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$(&#39;#.boxBody li&#39;).click(function(){
window.location = $(this).children().attr(&#39;href&#39;);
}).mouseover(function() {
$(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);
}).mouseout(function() {
$(this).css(&#39;backgroundColor&#39;,&#39;&#39;);
});  
});
</script>

7. Cari code di bawah ini (tekan ctrl+F untuk mempermudah pencarian)

]]> </ B: skin>

8. Setelah ketemu copy code Css di bawah ini dan letakkan di atas code di atas.

#tabMenu {margin:0;    padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}
/* this is the button images http://amatullah83.blogspot.com*/
li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}
li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://sites.google.com/site/amatullah83/bg/tabRandom.png) 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://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;
height:11px;}
.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block}
/* styling for the content*/
.boxBody div ul { margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div li span { font-size:8px;color:#9F9F9F;}
/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}

8. Simpan template


Catatan:




  • Kode CSS di atas masih bisa sobat ubah lagi dengan memodifikasi agar sesuai dengan template blog sobat. Untuk membantu sobat mengidentifikasi properti CSS di atas merujuk pada screenshot berikut:


9. Kembali ke dashboard dan pilih tata letak >> tambah gadget >> Html/JavaScript
10. Copy paste Script di bawah ini.




<div class="box"> <ul id="tabMenu"> <li class="posts selected"> </ li> <-! tombol default -> <li class="comments"> </ li> <li class="category"> </ li> <li class="famous"> </ li> <li class="random"> </ li> </ ul> <div class="boxTop"> </ div> <div class="boxBody"> <- default halaman -> <div id="posts" class="show"> <ul> <li> Posting 1 </ li> <li> Pos 2 < / li> <li class="last"> Pos 3 </ li> </ ul> </ div> <div id="comments"> <ul> <li> Komentar 1 </ li> <li> Komentar 2 </ li> <li class="last"> Komentar 3 </ li> </ ul> </ div> <div id="category"> <ul> <li> Kategori 1 </ li> <li> Kategori 2 </ li> <li class="last"> Kategori 3 </ li> </ ul> </ div> <div id="famous"> <ul> <li> pasca Terkenal 1 </ li> <li > Terkenal pos 2 </ li><li class="last"> Terkenal pos 3 </ li> </ ul> </ div> <div id="random"><ul> <li> pasca Acak 1 </ li> <li> pasca Acak 2 </ li> <li class="last"> Acak pos 3 </ li> </ ul> </ div> </ div> <div class="boxBottom"> </ div ></ div>


11. Dan yang terakhir simpan.


Semoga artikel ini bermanfaat, dan jika ada yang ditanyakan mengenai cara membuat menu tab dengan jQuery tinggalkan komentar anda di bawah ini.

Full Version

Tidak ada komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top