Judul : Cara membuat menu Accordion sederhana
link : Cara membuat menu Accordion sederhana
Cara membuat menu Accordion sederhana
S
ebenarnya menu Accordion yang akan full blog design buat ini adalah bentuk Accordion yang sangat sederhana yang bisa sobat kembangkan lagi ,mungkin sudah banyak yang tahu atau bahkan mempraktekan menu Accordion ini dengan tampilan yang labih keren lagi ,jadi sengaja untuk tutorial kali ini kang mahfid akan membuat secara sederhana untuk melihat DEMO nya silahkan klik disini . nah untuk Cara membuat menu Accordion sederhana ikuti tutorialnya sampai selesai :- Login ke blogger
- setelah masuk ke dasboard Pilih EDIT HTML (jangan lupa download lengkap dulu template untuk menjaga kemungkinan salah dalam penempatan script
- Cari kode <head>lalu Letakkan kode Jquery di bawah ini tepat di bawah kode <head> berikut kode nya : <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
- selanjutnya masukkan kode CSS dibawah ini tepat di atas kode ]]></:skin> berikut kodenya
- selanjutnya Taruh kode di bawah ini tepat di bawah kode </body> berikut kodenya :
- Lalu Save Template
#accordion { list-style: none; padding: 0 0 0 0; width: 170px; } #accordion li{ display: block; background:brown ;color:#fff; font-weight: bold; margin: 1px; cursor: pointer; padding: 10px 5 5 7px; list-style: circle; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 0px; } #accordion ul { list-style: none; padding: 0 0 0 0; display: none; } #accordion ul li{ font-weight: normal; cursor: auto; background-color: tranparent; padding: 0 0 0 7px; } #accordion a { text-decoration: none; } #accordion a:hover { text-decoration: underline; }
<script>$("#accordion > li > div").click(function(){ if(false == $(this).next().is(':visible')) { $('#accordion ul').slideUp(300); } $(this).next().slideToggle(300); }); $('#accordion ul:eq(5)').show();</script>
<ul id="accordion">Semoga sobat bisa bereksperiment dan mengembangkan bentuk Accordion ini menjadi lebih keren Jika ada keluhan dan tidak berfungsinya tutorial ini silahkan kasi komentar di Forum Komentar
<li><div>Sports</div>
<ul>
<li><a href="#">Golf</a></li>
<li><a href="#">Cricket</a></li>
<li><a href="#">Football</a></li>
</ul>
</li>
<li><div>Technology</div>
<ul>
<li><a href="#">iPhone</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<li><div>Latest</div>
<ul>
<li><a href="#">Obama</a></li>
<li><a href="#">Iran Election</a></li>
<li><a href="#">Health Care</a></li>
</ul>
</li>
<li><div>template</div>
<ul>
<li><a href="#">2 kolom</a></li>
<li><a href="#">Minima</a></li>
<li><a href="#">Magazine</a></li>
</ul>
</li>
</ul>
Jika Artikel ini bermanfaat buat sobat semua tolong bantuannya untuk mengklik
Terima kasih
Demikianlah Artikel Cara membuat menu Accordion sederhana
Sekian Cara membuat menu Accordion sederhana, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.