Membuat menu navigasi yang intuitif dan mudah digunakan adalah kunci untuk desain web yang baik. Widget Menu JQuery UI adalah alat yang sangat berguna untuk mengubah daftar HTML biasa menjadi menu navigasi yang interaktif dan kaya fitur, lengkap dengan dukungan keyboard dan sub-menu. Ini sangat ideal untuk membuat menu konteks, menu dropdown, atau daftar navigasi standar.
Langkah 1: Mempersiapkan Struktur HTML
Widget menu JQuery UI bekerja dengan mengubah elemen daftar yang tidak berurutan (<ul>). Setiap item daftar (<li>) akan menjadi item menu, dan sub-menu dapat dibuat dengan menempatkan <ul> bersarang di dalam <li>.
Berikut adalah struktur HTML dasar untuk menu navigasi yang akan kita gunakan:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial JQuery UI #7: Menu Navigasi</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.demo-menu { width: 200px; }
</style>
</head>
<body>
<h1>Demonstrasi Menu Navigasi JQuery UI</h1>
<div class="demo-menu">
<ul id="main-menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li>
<a href="#">Layanan</a>
<ul>
<li><a href="#">Desain Web</a></li>
<li><a href="#">Pengembangan Aplikasi</a></li>
<li><a href="#">Konsultasi IT</a></li>
</ul>
</li>
<li><a href="#">Portofolio</a></li>
<li class="ui-state-disabled"><a href="#">Blog (Tidak Aktif)</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
<script>
$( function() {
// Kode JQuery UI akan ditempatkan di sini
});
</script>
</body>
</html>
Perhatikan bagaimana <ul> bersarang digunakan untuk membuat sub-menu. Kita juga menambahkan kelas .ui-state-disabled ke salah satu item untuk menonaktifkannya, yang merupakan fitur bawaan JQuery UI.
Langkah 2: Mengaktifkan Widget Menu
Untuk mengubah daftar HTML di atas menjadi menu JQuery UI, Anda cukup memanggil metode .menu() pada elemen <ul> utama.
$( function() {
$( "#main-menu" ).menu();
});
Simpan dan jalankan halaman Anda. Anda akan melihat bahwa daftar HTML kini telah diubah menjadi menu navigasi yang bergaya. Sub-menu akan muncul saat Anda mengarahkan kursor ke item yang sesuai.
Langkah 3: Menyesuaikan Menu
Widget Menu memiliki beberapa opsi yang dapat Anda gunakan untuk menyesuaikan perilakunya.
Opsi 1: icons
Anda dapat menambahkan ikon ke item menu dengan opsi icons. Anda bisa mengontrol ikon untuk setiap item dan ikon untuk sub-menu.
$( "#main-menu" ).menu({
icons: { submenu: "ui-icon-circle-triangle-e" }
});
Ini akan mengubah ikon default untuk sub-menu menjadi panah.
Opsi 2: Mengontrol Item Menu secara Programatis
Anda dapat mengaktifkan atau menonaktifkan item menu menggunakan metode enable() dan disable().
// Contoh: Mengaktifkan item menu yang dinonaktifkan
$( "#main-menu" ).menu( "enable" );
// Contoh: Menonaktifkan item menu tertentu
$( "#main-menu" ).menu( "disable", $( "#main-menu li:last-child" ) );
Langkah 4: Mendengarkan Event Menu
Anda dapat melampirkan event ke widget menu untuk melakukan tindakan saat interaksi tertentu terjadi, seperti saat pengguna mengklik item menu. Event yang paling umum adalah select.
$( "#main-menu" ).menu({
select: function( event, ui ) {
var selectedItem = ui.item.text();
alert( "Anda memilih: " + selectedItem );
}
});
Fungsi event select menerima dua argumen: event dan ui. Objek ui.item berisi elemen <li> yang dipilih, yang dapat Anda gunakan untuk mendapatkan informasi lebih lanjut, seperti teks atau nilai.
Langkah 5: Membuat Menu Konteks (Context Menu)
Widget menu juga sangat cocok untuk membuat menu konteks (menu klik kanan). Anda dapat menyembunyikan menu secara default dan menampilkannya saat pengguna mengklik kanan pada elemen tertentu.
<p id="context-area">Klik kanan di sini untuk menampilkan menu.</p>
$( function() {
// Sembunyikan menu secara default
$( "#main-menu" ).hide().menu();
$( "#context-area" ).on( "contextmenu", function( event ) {
event.preventDefault(); // Mencegah menu konteks browser muncul
// Tampilkan menu di posisi kursor
$( "#main-menu" ).show().position({
my: "left top",
at: "left bottom",
of: event
});
});
// Sembunyikan menu saat diklik di tempat lain
$( document ).on( "click", function() {
$( "#main-menu" ).hide();
});
});
Dengan kode ini, menu akan muncul tepat di posisi kursor saat pengguna mengklik kanan pada area yang ditentukan.
Kesimpulan
Widget Menu Navigasi JQuery UI adalah cara yang mudah dan efisien untuk mengubah daftar HTML menjadi menu yang interaktif, profesional, dan dapat diakses. Dengan fitur seperti sub-menu, dukungan keyboard, dan kustomisasi yang mudah, Anda dapat dengan cepat membuat navigasi yang kuat untuk situs web atau aplikasi Anda.
