Membuat Multi Level Drop Down dengan jQuery
Saya
sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia
mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang
tutorial membuat website kepada anda semua. Nah, kali ini saya akan
memberikan satu lagi tutorial blog mengenai cara membuat multi level
drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah
posting cara membuat menu drop down
yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop
down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub
menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran
silahkan lihat gambar di bawah ini atau langsung saja klik disini.
Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya :
- Login ke Blogger dengan akun
- Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
- Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
- Letakkan script JQuery berikut sebelum tag </head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- Tambahkan juga script berikut setelah script JQuery yadi
- <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" /> <!--[if lte IE 7]>
- <style type="text/css">
- html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
- </style>
- <![endif]-->
- <script type="text/javascript" src="https://sites.google.com/site/bangkolis/javascript/maskolis.js"></script>
- Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:
- Setelah itu tambahkan kode HTML berikut diatas <div id='header-wrapper'>
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.maskolis.co.cc/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.maskolis.co.cc/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div> - Terakhir Save Template anda, dan lihat hasilnya.
Silahkan
ganti kode yang saya beri warna dengan tulisan anda sendiri, itu dulu
tutorial kali ini selamat mencoba dan jangan sungkan jika bingung anda
bisa isi kotak komentar di bawah.
0 komentar: