Membuat menu yang berbeda secara kreatif terkadang cukup sulit ketika Anda tidak memiliki ide atau inspirasi yang bagus. Namun hal semacam ini bisa diperbaiki dengan mencari desain menu inspirasional lainnya atau dengan bantuan tools. Dalam hal ini, jQuery.Mmenu datang sebagai alat yang cukup berguna.

jQuery.Mmenu adalah plugin jQuery yang mudah digunakan untuk membuat menu navigasi geser aplikasi seluler di situs web Anda. Menu kreatif yang apik ini akan menghadirkan pengalaman pengguna yang lebih baik dan rapi.

Mulai

Untuk memulai dengan jQuery.Mmenu, buka halaman unduh dan plugin akan diunduh secara otomatis. Dalam posting ini, kami akan mencoba membangun menu dasar.

Sama seperti plugin jQuery lainnya, untuk menggunakan ini Anda harus menyertakan dependensi yang diperlukan ke situs Anda. Yaitu jQuery, jquery.mmenu.js dan jquery.mmenu.css. Cuplikannya adalah sebagai berikut:

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

Dan itu sudah cukup untuk membuat menu dasar dengan semua fungsi dan gaya. Pada fitur yang lebih canggih dan ekstra, Anda perlu menyertakan file JS dan CSS tambahan.

Membuat sebuah Menu

Mari kita buat menu dasar seperti yang biasa Anda buat dengan nav, ul, li dan a elemen. Dalam demo ini, kita akan membuat menu horizontal yang memiliki tiga sub-menu dan juga tiga sub-menu, seperti itu.

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

Pada menu di atas, kami telah menyertakan nav dengan menu id yang akan digunakan sebagai referensi fungsi jQuery.mmenu. Kemudian panggil plugin dengan javascript fungsi dan sertakan id seperti itu.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

Di tag LI, Anda dapat melihat kelas bernama Selected, kelas ini berguna untuk membuat menu default yang dipilih saat inisialisasi. Anda juga dapat menambahkan kelas Anda sendiri (misalnya active), tetapi pastikan untuk menyertakannya di bagian konfigurasi, seperti itu.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

Plugin ini secara otomatis menambahkan link penutup dan pembuka submenu, jadi kita tidak perlu membuatnya. Menu kami akan terlihat seperti ini.

Kesimpulan

jQuery.mmenu menawarkan solusi yang bagus untuk membuat menu yang berbeda semudah mungkin. Anda bahkan dapat membuat elemen interaktif lain dari plugin ini, misalnya, Anda dapat membuat bilah alat geser dan bilah notifikasi untuk situs seluler.

jQuery.Mmenu dapat disesuaikan untuk penggunaan di muka juga. Misalnya, Anda dapat membuat daftar kontak seperti seluler di situs Anda dengan menggabungkan temaekstensi, addon (label, penghitung, header, dragOpen dan searchfield) dan posisi.

Jika Anda menemukan artikel Membuat Menu Geser Dengan Mudah Menggunakan jQuery.mmenu bermanfaat, silahkan bagikan ke teman-teman anda. Sampai jumpa di postingan-postingan berikutnya. Mengikuti driveria.net untuk mendapatkan update terbaru!