Membuat Menu Accordion

Menu Accordion

Red-Mercenary - Kali ini saya mau berbagi info tentang cara membuat menu accordion di blog. Apa itu menu accordion? menu accordion sebenarnya mirip-mirip dengan menu dropdown, namun berbentuk seperti alat musik accordion fungsinya untuk menghemat lahan dan meringkas widget atau tulisan yang terlalu panjang. Kalo masih ga ngerti contohnya seperti yang di pasang di kanan blog ini.

Yang dipasang di blog ini adalah yang sudah dimodifikasi, script aslinya saya dapat dari http://www.maskolis.com/

Langsung saja langkah-langkah membuatnya sebagai berikut:

1. Log In ke blogger
2. Buka menu Tata Letak 
3. Pilih tambahkan gadget, selanjutnya pilih HTML / JavaScript 
4. Pastekan kode berikut 

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:
#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiriHTe6xCz6Dd-xBKKQ8m6NR7PXUDajs0Y_J3oP9S2X8VC54aA5rzQyzAuAbv07fsE606HJZ-K1RrsGMFByZgDFJP768UdvQ-aYyAqUhDer8SPMtmimLO7LV0yUM_5DxA7kGaDFSHVsC8/s1600/arrow_right.gif);
background-repeat: no-repeat;background-position: right center;color:#000;
font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;
background-position: left center;margin:0;padding:2px 0 3px 0;
text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/
AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);
background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Setelah itu simpan, Konfigurasi:

• Title : Ganti untuk merubah judul heading menu
• Isi Konten : Silahkan diganti atau diisi dengan widget atau tulisan yang diinginkan

 Source : http://www.maskolis.com/2012/12/membuat-menu-accordion-tanpa-edit-html.html