Membuat Menu Accordion JQuery

Ketika mengembangkan sebuah website, itu merupakan suatu tantangan besar untuk dapat mengatur isi sedemikian rupa. Belum lagi betapa pentingnya untuk mencegah informasi overloading dengan mengekspos pengunjung Anda untuk terlalu banyak data dalam tampilan tunggal. Inilah sebabnya mengapa ada teknik tertentu yang membantu konten grup desainer dan tunjukkan hanya jika pengguna tertarik pada apa yang Anda tawarkan dan berinteraksi dengan halaman

Menu ini tidak terlalu memberatkan loading blog tanpa mengurangi tampilan menu yang colorful. untuk demonya silahkan dilihat pada link berikut :

Ikuti langkah-langkah dibawah, cara Membuat Menu Accordion Dengan JQuery :

• Pergi ke "Tata Letak" kemudian "Edit HTML".
• Copy script JQuery di bawah ini dan letakkan dibawah HEAD.
  

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/script.js' type='text/javascript'/>

• Selanjutnya silahkan cari code ]]>/b:skin dan letakkan code CSS berikut diatasnya :

ul{
margin:0;
padding:0;
}

ul.accordion{
/* The topmost UL */
width:240px;
margin:0;
padding:10px;
}

li{
list-style:none;
text-align:left;
}

li.menu{
/* The main list elements */
padding:5px 0;
width:100%;
}

li.button a{
/* The section titles */
display:block;
font-family:BPreplay,Arial,Helvetica,sans-serif;
font-size:21px;
height:34px;
overflow:hidden;
padding:10px 20px 0;
position:relative;
width:200px;
}

li.button a:hover{
/* Removing the inherited underline from the titles */
text-decoration:none;
}

li.button a span{
/* This span acts as the right part of the section's background */
height:44px;
position:absolute;
right:0;
top:0;
width:4px;
display:block;
}

/* Setting up different styles for each section color */

li.button a.blue{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NnrbOH_5AB9ij2vFMdiPFEI-jQI09xoc0xtYNuzsHSRbk6F3E6RnR_Dz2gecun0hnC0yPJCvXP0HFmSQN9yp0BnInPZDUE4TIv1gxHNgQWtui18m9xDidgX-WDEiYS0LM9T1JskPHT8/s320/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NnrbOH_5AB9ij2vFMdiPFEI-jQI09xoc0xtYNuzsHSRbk6F3E6RnR_Dz2gecun0hnC0yPJCvXP0HFmSQN9yp0BnInPZDUE4TIv1gxHNgQWtui18m9xDidgX-WDEiYS0LM9T1JskPHT8/s320/blue.png) repeat-x top right;}

li.button a.green{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHtlKdcXgGavOXhXX-hy2G80F_23Ct5kCFlX8E_YgABpBTjgn3XpcV1yMUwOr844chHwfCpphhhwMOq1zIVgAQDhewy73BtUL_eh9rYNxf_EfjUWv_CzMNmW5eVixqUJIeXwFg6VJ3Rh0/s320/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHtlKdcXgGavOXhXX-hy2G80F_23Ct5kCFlX8E_YgABpBTjgn3XpcV1yMUwOr844chHwfCpphhhwMOq1zIVgAQDhewy73BtUL_eh9rYNxf_EfjUWv_CzMNmW5eVixqUJIeXwFg6VJ3Rh0/s320/green.png) repeat-x top right;}

li.button a.orange{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVIfkaKELRrjmBF3WdEke4_O_kH1BqbQ4qFVGFqXif3oBPC3NV7JaFJfQAdzYvq8M7DRVNP1P6PBJdqp4X-eMGzGSiml1lOBNZernFjfOfqAabj8-aiOILpsdqQ56kekRGoiDXmfHIttE/s320/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVIfkaKELRrjmBF3WdEke4_O_kH1BqbQ4qFVGFqXif3oBPC3NV7JaFJfQAdzYvq8M7DRVNP1P6PBJdqp4X-eMGzGSiml1lOBNZernFjfOfqAabj8-aiOILpsdqQ56kekRGoiDXmfHIttE/s320/orange.png) repeat-x top right;}

li.button a.red{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8woS0vJEGagKSRzU7siSLEreUFkbrdn4wq1W1G0_W0W950EhPVM-GoNZXDRlSckLpOoCaDuT7fkdKbSWMRysjBwvYsaN2_G-xD7D0Sxm1eYr8v7RaDB8hB2IT4HSE7ZiVaGXRLmiWcBk/s320/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8woS0vJEGagKSRzU7siSLEreUFkbrdn4wq1W1G0_W0W950EhPVM-GoNZXDRlSckLpOoCaDuT7fkdKbSWMRysjBwvYsaN2_G-xD7D0Sxm1eYr8v7RaDB8hB2IT4HSE7ZiVaGXRLmiWcBk/s320/red.png) repeat-x top right;}

/* The hover effects */

li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}

.dropdown{
/* The expandable lists */
display:none;
padding-top:5px;
width:100%;
}

.dropdown li{
/* Each element in the expandable list */
background-color:#373128;
border:1px solid #40392C;
color:#CCCCCC;
margin:5px 0;
padding:4px 18px;
}

• Selanjutnya simpan Template.
• Lanjut ke "Elemen Laman" tambah gadget pada sidebar.
• Pilih "HTML/JavaScript" kemudian copy paste code berikut kedalamnya :
  

<ul class="accordion">
<li class="menu">

<ul>
<li class="button"><a class="green" href="#">Judul 1 <span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 1.1</a></li>
<li><a href="#">Nama Content 1.2</a></li>
<li><a href="#">Nama Content 1.3</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu">

<ul>
<li class="button"><a class="orange" href="#">Judul 2 <span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 2.1</a></li>
<li><a href="#">Nama Content 2.2</a></li>
<li><a href="#">Nama Content 2.3</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu">

<ul>
<li class="button"><a class="blue" href="#">Judul 3 <span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 3.1</a></li>
<li><a href="#">Nama Content 3.2</a></li>
<li><a href="#">Nama Content 3.3</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu">

<ul>
<li class="button"><a class="red" href="#">Judul 4<span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 4.1</a></li>
<li><a href="#">Nama Content 4.2</a></li>
<li><a href="#">Nama Content 4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Selesai Deh..
Untuk HEAD dan ]]>/b:skin> jangan luma menggunakan <>.
Semoga Bermanfaat...!!!