Membuat Menu Bertingkat dengan JQuery jQSimpleMenu

Sekitar dua tahun yang lalu, saya pernah membuat tutorial membuat menu bertingkat menggunakan Dreamweaver, waktu itu masih versi 8. Waktu itu teknologi JQuery belum begitu dikenal dan belum sekaya saat ini. Seperti kita ketahui, JQuery merupakan salah satu framework(library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML dapat dilakukan dengan mudah. Nah, saat ini untuk membuat menu bertingkat atau sering disebut tree menu, hierarchical menu atau multi level dropdown menu, sangatlah mudah. Cukup dengan menuliskan satu atau dua baris perintah jquery, menu sudah jadi.

Penasaran? Ingin tau caranya? Ikuti terus tutorial ini.

Langkah #1. Sertakan Library yang Diperlukan

Karena berbasis JQuery, tentu library utama yang diperlukan adalah library JQuery yang bisa didownload di situs resmi JQuery. Library yang lain adalah plugin jQSimpleMenu dan file css untuk mengatur tampilan menu. Keduanya dibuat oleh Muhammad Shahbaz Saleem pemilik situs EGrappler. Tidak perlu repot, ketiganya dapat didownload di bagian akhir tutorial ini.

Berikut ini potongan perintah untuk menyertakan library yang diperlukan:

Code block

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jqsimplemenu.js"></script>
<link rel="stylesheet" href="css/jqsimplemenu.css" type="text/css" media="screen" />

Langkah #2. Buat Menu dengan Un-ordered List HTML

Salah satu yang saya suka dari library ini adalah menu dapat dibuat dengan sangat mudah menggunakan tag standar HTML yaitu un-ordered list atau <ul>. Tentu Anda mengenalnya bukan? Berikut ini contoh menu yang saya buat (mengikuti menu yang ada di website Achmatim.net).

Code block

<ul class="menu">
	<li><a href="http://achmatim.net/">Home</a></li>
	<li><a href="http://achmatim.net/about-me/">About Me</a>
		<ul>
			<li><a href="http://achmatim.net/about-me/about/">About Me</li>
			<li><a href="http://achmatim.net/about-me/friends/">Friends</li>
			<li><a href="http://achmatim.net/?page_id=448">Lifestream</li>
			<li><a href="http://achmatim.net/about-me/photos/">Photos</a></li>
		</ul>
	</li>
	<li><a href="http://achmatim.net/buku-gratis/">Buku Gratis</a>
		<ul>
			<li><a href="#">Indonesia</a>
				<ul>
					<li><a href="http://achmatim.net/buku-gratis/algoritma-dan-pemrograman-dengan-turbo-c/">Algoritma dan Pemrograman dengan Turbo C</a></li>
					<li><a href="http://achmatim.net/buku-gratis/mysql-5-dari-pemula-hingga-mahir/">MySQL 5: Dari Pemula Hingga Mahir</a></li>
					<li><a href="http://achmatim.net/buku-gratis/pemrograman-web-dengan-php-dan-mysql/">Pemrograman Web dengan PHP dan MySQL</a></li>
				</ul>
			</li>
			<li><a href="#">Inggris</a>
				<ul>
					<li><a href="http://achmatim.net/2011/09/14/ebook-gratis-dari-smashing-magazine/">Best of Smashing Magazine</a></li>
					<li><a href="http://achmatim.net/2010/07/12/buku-gratis-jquery-novice-to-ninja-dari-sitepoint-hanya-hari-ini/">JQuery: Novice to Ninja</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="http://achmatim.net/downloads/">Downloads</a></li>
	<li><a href="http://achmatim.net/materi-kuliah/">Materi Kuliah</a></li>
	<li><a href="http://achmatim.net/about-me/sitemap/">Sitemap</a></li>
	<li><a href="http://achmatim.net/tutorial/">Tutorial</a>
		<ul>
			<li><a href="http://achmatim.net/tutorial/dreamweaver/">Dreamweaver</a></li>
			<li><a href="http://achmatim.net/tutorial/mysql/">MySQL</a></li>
			<li><a href="http://achmatim.net/tutorial/php/">PHP</a></li>
			<li><a href="http://achmatim.net/tag/jquery/">JQuery</a></li>
		</ul>
	</li>
</ul>

Langkah #3. Panggil Fungsi Javascript / JQuery dan Terapkan di Menu

Langkah selanjutnya adalah memanggil fungsi atau plugin jqsimplemenu dan diterapkan di menu yang telah dibuat sebelumnya. Plugin jqsimplemenu akan melakukan tugasnya dengan baik. Cara pemanggilannya juga sangat mudah, lihat aja source pendek berikut ini:

Code block

<script type="text/javascript">
	$(document).ready(function () {
		$('.menu').jqsimplemenu();
	});
</script>

Langkah #4. Lihat Hasilnya

Langkah terakhir, tinggal dicoba di browser. Hasilnya kurang lebih sbb:

Tampilan Menu Bertingkat dengan JQuery jQSimpleMenu

Demo dan Download

• Tutorial ini dapat dilihat hasilnya secara langsung di sini.
• Source code beserta library yang diperlukan dapat didownload di 
  JQSimpleMenu-Achmatim (63.5 KiB, 4,424 hits)

Referensi

Tutorial ini disusun berdasarkan referensi dari berbagai macam sumber, terutama situs ini.