Tampilan Menu Bertingkat dengan JQuery jQSimpleMenu

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:

  1. <script type="text/javascript" src="js/jquery.min.js"></script>
  2. <script type="text/javascript" src="js/jqsimplemenu.js"></script>
  3. <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).

  1. <ul class="menu">
  2. <li><a href="http://achmatim.net/">Home</a></li>
  3. <li><a href="http://achmatim.net/about-me/">About Me</a>
  4. <ul>
  5. <li><a href="http://achmatim.net/about-me/about/">About Me</li>
  6. <li><a href="http://achmatim.net/about-me/friends/">Friends</li>
  7. <li><a href="http://achmatim.net/?page_id=448">Lifestream</li>
  8. <li><a href="http://achmatim.net/about-me/photos/">Photos</a></li>
  9. </ul>
  10. </li>
  11. <li><a href="http://achmatim.net/buku-gratis/">Buku Gratis</a>
  12. <ul>
  13. <li><a href="#">Indonesia</a>
  14. <ul>
  15. <li><a href="http://achmatim.net/buku-gratis/algoritma-dan-pemrograman-dengan-turbo-c/">Algoritma dan Pemrograman dengan Turbo C</a></li>
  16. <li><a href="http://achmatim.net/buku-gratis/mysql-5-dari-pemula-hingga-mahir/">MySQL 5: Dari Pemula Hingga Mahir</a></li>
  17. <li><a href="http://achmatim.net/buku-gratis/pemrograman-web-dengan-php-dan-mysql/">Pemrograman Web dengan PHP dan MySQL</a></li>
  18. </ul>
  19. </li>
  20. <li><a href="#">Inggris</a>
  21. <ul>
  22. <li><a href="http://achmatim.net/2011/09/14/ebook-gratis-dari-smashing-magazine/">Best of Smashing Magazine</a></li>
  23. <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>
  24. </ul>
  25. </li>
  26. </ul>
  27. </li>
  28. <li><a href="http://achmatim.net/downloads/">Downloads</a></li>
  29. <li><a href="http://achmatim.net/materi-kuliah/">Materi Kuliah</a></li>
  30. <li><a href="http://achmatim.net/about-me/sitemap/">Sitemap</a></li>
  31. <li><a href="http://achmatim.net/tutorial/">Tutorial</a>
  32. <ul>
  33. <li><a href="http://achmatim.net/tutorial/dreamweaver/">Dreamweaver</a></li>
  34. <li><a href="http://achmatim.net/tutorial/mysql/">MySQL</a></li>
  35. <li><a href="http://achmatim.net/tutorial/php/">PHP</a></li>
  36. <li><a href="http://achmatim.net/tag/jquery/">JQuery</a></li>
  37. </ul>
  38. </li>
  39. </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:

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

Langkah #4. Lihat Hasilnya

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

Tampilan Menu Bertingkat dengan JQuery jQSimpleMenu
Tampilan Menu Bertingkat dengan JQuery jQSimpleMenu

Demo dan Download

Referensi

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

Berbagi itu indah...Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0Digg this

20 comments

  1. Do not steel other’s effort, this is not your tutorial link directly to author site. Stop cheating….

  2. aduh gan….kalo pengen masukin nya ke halaman web localhost saya gan gimana?? ko gak muncul y…klo di php ada perubahan lain kah…maaf banyak nanya..newbie..hehe..terimakasih

  3. Mas untuk mengatur menunya di mana yaah, saya sudah coba tapi menunya keluar jauh dari link menu yang di klik, seperti di contok kalo di klik buku gratis pop up menu keluar sejajar dengan materi kuliah. tolong pencerahannua

  4. Klo membuat navigasi seperti ini gmana ya mas…?
    Misal kita klik Home, trus masuk submenu Individu, masuk submenu lagi Produk dan masuk lagi ke proteksi.

    Dibagian atas halaman ada navigasi sepeti ini…
    Home > Individu > Produk > Proteksi

    mohon pencerahan… terimakasih…

  5. pak mw nnya gmna cara nge upload file dan link web k admin pak,saya rencana mw mmbuat website yang berisi library template,jdi jika ada rekan2 ingin nge download bsa,atau ingin melihat langsung template juga bsa pak
    dan semua data saya msukin lewt admin dan d tampilkan ke user pak
    mudah2an bapak paham dengan pertanyaan saya
    Makasih pak??

    1. Pertanyaannya cukup paham, jawabannya panjaaaang. Intinya, perlu menguasai dasar2 php dan pengembangan web terlebih dahulu. Selebihnya pelajari teknologi pendukung spt javascript, jquery dan CSS. Proses umumnya adalah, data disimpan ke database dan tinggal ditampilkan ke user sesuai kebutuhan.

Leave a Reply

Your email address will not be published. Required fields are marked *