Cara Membuat Menu JQuery Accordion

Semangat buat berbagi Tips And Trik Blog ke sahabat blogger mania, Kali Lora Malunk Blog akan berbagi trik mengenai Membuat Menu  JQuery Accordion ini menggunakan kode javascript yang sangat sederhana sekali.

Tips ini akan membantu membangkitkan efek jQuery meciptakan sebuah fungsi indah dengan dibantu kode css yang menjadi pilar hingga terbentuk desain yang sangat menarik sekali.

Untuk Melihat Hasil Yang sudah Terjadi Silahkan Klik : D E M O

Mari kita memasuki tahap pembelajaran :

Langkah 1

Cari kode ]]></b:skin> pada "Edit Template"

Langkah 2

Copy Paste kode javascript dibawa ini dan letakkan di bawah kode ]]></b:skin>

<script type="text/javascript">
$(document).ready(function(){
$('.wadah').hide();
$('.sedul:first').addClass('active').next().show();
$('.sedul').click(function(){
if( $(this).next().is(':hidden') ) {
$('.sedul').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
return false;
});
});
</script>

Langkah 3
Memasukkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>

.boxtama {
background:#333;
width: 220px;
margin: 0 auto;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-top:3px solid #777;
font-size:12px;
}
.boxtama .wadah {
margin: 0 0 5px 2px;
padding: 0;
overflow: hidden;
font-size: 16px;
width: 214px;
clear: both;
background: #bbb;
border: 1px solid #d6d6d6;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.boxtama .wadah .anakwadah {
padding:15px 8px 10px;
}
.boxtama .wadah .anakwadah p {
padding: 5px 0;
margin: 5px 0;
font:12px normal;
color:#000;
}
.boxtama .wadah h3 {
font: 18px normal Georgia;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ddd;
color: #993333;
}
.boxtama .wadah img {
float: left;
margin: 10px 8px 0px 0;
padding: 3px;
background: #ddd;
border: 1px solid #444;
width:60px;
height:60px;
}
.boxtama .wadah .anakwadah ul {
padding:0;
margin:0;
list-style:none;
}
.boxtama .wadah .anakwadah li {
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrow-gubhugreyot.png) top left no-repeat;
background-position:5px 5px;
list-style:none;
margin:0px;
padding:0px;
border-bottom:1px dotted #999;
transition:0.4s;
-o-transition:0.4s;
-moz-transition:0.4s;
-webkit-transition:0.4s;
}
.boxtama .wadah .anakwadah li:hover{
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrowHov-gubhugreyot.png) top left no-repeat;
background-position:10px 5px;
}
.boxtama .wadah .anakwadah li a {
font-family:Trebuchet MS;
padding:0 0 0 25px;
font-size:11px;
color:#222;
font-weight:500;
text-decoration:none;
}
.boxtama .wadah .anakwadah li a:hover {
color:red;
}
h4.sedul {
padding: 0;
margin: 0 0 5px 0;
background: #666 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgOrangeV34H2-gubhugreyot.gif) bottom left repeat-x;
height: 36px;
line-height: 36px;
width: 220px;
font-size: 14px;
font-weight: bold;
float: left;
}
h4.sedul:hover { /* hor.png */
padding: 0;
margin: 0 0 5px 0;
background:#660000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgFadeBlue-gubhugreyot.png) left center no-repeat;
background-position:-1px 0;
border-right:1px solid #999;
}
h4.sedul a {
background: url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRedRight-gubhugreyot.png) left center no-repeat;
background-position:8px 5px;
border-left:2px solid #fff;
border-right:2px solid #fff;
font-family:Droid Serif;
font-size:14px;
color:/*silver*/ #003366;
text-decoration: none;/*opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); */
display: block;
padding: 0 0 0 45px;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
h4.sedul a:hover {
background:#000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRightDownAnima-gubhugreyot.gif) left center no-repeat;
background-position:8px 5px;
color:red;
text-shadow:0px 1px 1px #888;
opacity:1.0;
filter:alpha(opacity=100);
}
h4.active {
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgblueV35H1-gubhugreyot.gif) top left repeat-x;
}

Langkah 4

Melanjutkan dengan mencari kode <head> . Letakkan kode Jquery dibawah ini tepat diatasnya kode . <head>

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

Langkah 5

Simpan Template / (Save Template)

Langkah 6

Masuk ke menu Rancangan Add Gadget "HTML/Javascript"

Langkah 7

Lalu Copy paste kode dibawah ini, ke kolom "HTML/JavaScript"

<div style="float:left;background:#111;padding:3px;border:2px solid #666;">

<div class="boxtama"><h4 class="sedul"><a class="pilih" href="#">Theme - Template</a></h4>
<div class="wadah">
<div class="anakwadah">
<h3>Tutorial Blog Up To Date</h3>
<ul class="accor">
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-related-posts-slide-out-boxez.html" target="_blank">Membuat Related Posts</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/mempercantik-tampilan-entri-popular-new.html">Modifikasi Entri Populer</a></li>
<li><a href="http://lora-malunk.blogspot.com">Tips And Trik Blog</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-google-custom-seacrh-sendiri.html" target="_blank">Membuat Google Custom</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-foto-menjadi-teks.html">Foto Menjadi Teks</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/cara-memanggil-robot-mbah-google-ke.html">Memanggil Robot Google</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/cara-mengatasi-feedburner-yang-error.html" target="_blank">Tips Feedburner Eror</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-slide-show-foto-dengan-efek.html">Membuat Slide Show</a></li>
<li><a href="http://lora-malunk.blogspot.com">Lora Malunk Blog</a></li>
</ul>
</div>
</div></div></div>