Sabtu pagi ini saya ingin berbagi bagaimana cara membuat menu accordion sederhana. Salah satu fungsi dari Accordion menu adalah meringkas tampilan, dan juga dapat memperindah tampilan web anda.
Yang saya share disini, hanya menu sederhana. Anda bisa mengutak-atik sesuka hati . langsung saja ya ..
index.html
<HTML>Yang saya beri warna merah, itu jquery yang digunakan dan harus online untuk mengaksesnya. Kalo Anda mau mencobanya di server local tanpa terhubung dengan internet, silahkan copy terlebih dahulu script jquerynya disini.
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link href="asset/style_accord.css" rel="stylesheet" type="text/css" />
<TITLE>Simplest Accordion Menu using jQuery - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Contoh Menu Accordion Sederhana</H2>
<ul id="accordion">
<li>Buah</li>
<ul>
<li><a href="#">Jeruk</a></li>
<li><a href="#">Mangga</a></li>
<li><a href="#">Rambutan</a></li>
<li><a href="http://muslimahintech.blogspot.com/"><i>click here!</i></a></li>
</ul>
<li>Bunga</li>
<ul>
<li><a href="#">Melati</a></li>
<li><a href="#">Mawar</a></li>
<li><a href="#">Kamboja</a></li>
<li><a href="http://muslimahintech.blogspot.com/"><i>click here!</i></a></li>
</ul>
<li>Hewan</li>
<ul>
<li><a href="#">Semut</a></li>
<li><a href="#">Kupu-kupu</a></li>
<li><a href="#">Ayam</a></li>
<li><a href="http://muslimahintech.blogspot.com/"><i>click here!</i></a></li>
</ul>
</ul>
</BODY>
<script type="text/javascript" src="asset/accord.js"></script>
</HTML>
Ini file css nya ..
style_accord.css
body, input{ font-family: Calibri, Arial; }
#accordion {Terakhir adalah script untuk pemanggilan jquerynya ..
list-style: none;
padding: 0 0 0 0;
width: 250px;
}
#accordion li{
display: block;
background-color:#0000FF;
color:#FFFFFF;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
display: none;
}
#accordion ul li{
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
Accord.js
$("#accordion > li").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion > ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
$('#accordion > ul:eq(0)').show();
dan taraaaaa ... ini hasilnya ....
Sekali lagi ini hanya tampilan sederhana, kalian bisa mengubahnya sesuka hati . Untuk lebih lengkapnya, saya sediakan link download filenya disini.
artikel yang sangat bagus gan, ijinkan saya mencoba,
ReplyDeletekalau ada waktu kunjung balik gan
http://muba-sky.blogspot.com/
terimakasih
monggo gan, terimakasih atas kunjungannya :)
DeleteGan kalo mau bikin accordion bertingkat gmna ya caranya??
ReplyDeleteterimakasih banyak om, :D
ReplyDeleteehh om, maap2.. tante.. hehe.
sama sama tante oby eh maap om :D hahaha, makasih atas kunjungannya :D
DeleteMbak tya , accordion saya kok ga bisa menyusaikan sama halaman page ny(ketika di click expand , content nya itu kaya stuck ke bawah jadi ga semuanya keliatan gitu mbak. itu masalahnya pada jQuerry nya / CSS nya ya ? Thanks :)))))))
ReplyDeletecoba di cek lagi jQuerynya om, kali aja ada yang nyangkut hee
Deletemakasih banyak mas
ReplyDelete