Cara Membuat Navigasi Off-Canvas dengan jQuery.mmenu

() translation by (you can also view the original English article)

Panduan ini akan membawamu ke panduan singkat ke jQuery.mmenu, sebuah plugin jQuery yang akan membantu pembuatan navigasi situs. Seiring kita menelitinya, kita akan melihat cara kita bisa menggunakan plugin ini untuk membuat menu off-canvas dari awal.

Apa itu jQuery.mmenu?

Deskripsi terbaik dari jQuery.mmenu, kita akan pergi ke halaman github-nya.

"Plugin jQuery terbaik untuk penampilan aplikasi dan menu off-canvas dengan sliding submenu untuk situs dan aplikasi situsmu"

Plugin jQuery.mmenu sangat mudah dikostumisasi dan hadir dengan banyak add-ons (misalnya counters dan dividers) beserta extensions (misalnya effect dan page shadows). Untuk yang ingin, dia juga hadir sebagai plugin Wordpress, dan dia bekerja baik di aneka macam browser!

MEmulai dengan jQuery.mmenu

Untuk memulai, kamu perlu mengambil sebuah salinan dari pustakanya. Ini bisa dilakukan dengan mengunjungi laman resminya, melalui package manager (seperti Bower), atau CDN (seperti cdnjs).

Setelah terunduh, kamu bisa memasukkan CSS dan berkas JS yang dibutuhkan ke halamanmu.

Mohon diingat, bahwa tergantung dari menu yang ingin kamu buat. Maka aset yang dibutuhkan bisa jadi berbeda. Contohnya, sebuah menu off-canvas membutuhkan berkas jquery.mmenu.css (atau versi mini-nya) dan jquery.mmenu.js (atau versi mini-nya). Jika kamu ingin memodifikasi perilaku bawaan dari menu (misalnya memindahkan posisinya ke kanan), kamu juga harus memasukkan berkas yang terkait ke add-on "off-canvas". Jika ini terlihat membingungkan dan kamu tidak ingin khawatir dengan berkas yang diperlukan, pergi dan gunakan "semua" berkas (yaitu jquery.mmenu.all.css dan jquery.mmenu.min.all.js) ke proyekmu.

Di demo kita, kita akan mengimpor "semua" berkas melalui CDN. Elemen head dari halaman kita akan mengacu ke "semua" berkas CSS:

1	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/css/jquery.mmenu.all.min.css'>

Dengan cara yang sama, kita akan meletakkan "semua" skrip (dan sebuah salinan dari jQuery) sebelum penutup tag <body>:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/js/jquery.mmenu.min.all.min.js'></script>

Sekarang mari buat menunya!

Mempersiapkan HTML-nya

Mari mulai dengan memahami struktur dari halaman kita. Berikut adalah kode HTML yang sesuai:

<div>
    <header><!-- more content here --></header>
    <main><!-- more content here --></main>
</div>
<nav id="menu"><!-- more content here --></nav>

Perhatikan bahwa kita meletakkan semua elemen, kecuali elemen nav, di dalam sebuah div.

Kita bisa menggunakan elemen lain sebagai kontainer-nya, tapi dengan melakukkanya kita harus menginformasikan plugin mengenai perubahan tersebut melalui konfigurasi properti yang relevant (yaitu properti offCanvas.pageNodeType) Selain itu, jika mungkin, kita harus menghindari pendeklarasian beberapa properti CSS untuk elemen pembungkus. Lebih spesifik lagi, plugin-nya merekomendasikan hal berikut:

"DIV ini menjadi yang terbaik tanpa sebuah (min-/max-) tinggi dan lebar, padding, border dan margin."

Markup

Tahap berikutnya adalah melihat lebih dekat ke struktur dari menu. Kode HTML yang relevan akan tampak seperti ini:

1	<nav id="menu">
2	<ul>
3	<li>
4	<a href="#">About</a>
5	<ul>
6	<li>
7	<a href="#">History<span>Click me</span></a>
8	</li>
9	<li>
10	<a href="#">Vision</a>
11	</li>
12	<li>
13	<a href="#">Team</a>
14	</li>
15	</ul>
16	</li>
17	<li>
18	<a href="#">Services</a>
19	</li>
20	<li>
21	<a href="#">Portfolio</a>
22	</li>
23	<li>
24	<a href="#">Clients</a>
25	</li>
26	<!-- more list items here -->
27	</ul>
28	</nav>

Di sini kita menggunakan kode HTML mudah untuk membangun menu kita. Unordered lists, dengan nested lists dan tautan. Plugin ini tidak mengharapkan markup spesifik; senanglah, kita bisa menggunakan markup apapun yang kita inginkan.

Kita menugaskan sebuah pengenal unik ke menu yang akan kita gunakan nanti untuk memberi contoh plugin-nya. Yang terkahir, kita menyembunikannya hingga semua styles telah berhasil diterapkan. Tahap ini pernting karena dengan menambahkan kode CSS berikut kita mencegah FOUC yang menggelegar:

1	nav {
2	display: none;
3	}

Sekarang kita telah menyiapkan laman kita, ini waktunya untuk menginisialisasi menu!

Memanaskan Plugin-nya

Sebelum menunjukan cara menembakkan plugin-nya, mari pertama-tama kita cache beberapa selectors kita:

1	var $menu = $('#menu');
2	var $btnMenu = $('.btn-menu');
3	var $img = $('img');

Sekarang kita menginisialisasinya menggunakan kode berikut:

1	$menu.mmenu({ // configuration settings here });

Kita bisa mengubah penampilan bawaan dan fungsionalitas menu kita melalui CSS dan konfigurasi yang tersedia. Kita akan melihat beberapa contoh dari ini sesaat lagi.

Lebih lanjut lagi, kita memiliki pilihan untuk membuka dan menutup menu baik secara otomatis maupun manual. Pada kasus kita, kita akan menampilkan menu saat elemen dengan class btn -menu diklik. Untuk meraih fungsionalitas ini, kita akan memanfaatkan API yang tersedia. Berikut kode yang dibutuhkan.

var api = $menu.data("mmenu");
    
$btnMenu.click(function() {
    api.open();
});

Sebaliknya, kita akan memilih untuk menghilangkan menu-nya secara otomatis. Ini adalah perilaku bawaan; terpicu ketika kita mengklik bagian apapun dari halaman, kecuali untuk bagian yang dimiliki menu.

Sebelum kita merangkak maju, ada satu hal lagi yang harus saya sebutkan. Jika kita mencoba membuka sebuah submenu dengan mengklik item menu target (a element), item ini tidak akan bisa diklik secara keseluruhan. Spesifiknya, submenu hanya akan terbuka ketika kita mengklik di atas bagian yang tepat dari item menu (lihat contoh langsung untuk memahami perilaku ini). Untuk membuat seluruh item menu bisa diklik, kita harus menambahkan baris kode berikut:

1	$menu.find( ".mm-next" ).addClass("mm-fullsubopen");

Mengganti Gambar Off-Canvas

Di bagian ini, tujuannya adalah untuk menampilkan ikon navigasi yang berbeda tergantung keadaan dari menu. Screenshot berikut memvisualisasikan apa yang ingin kita capai:

menu icon states — Dua ikon dari keadaan

Untuk membuatnya terjadi, kita akan bekerja dengan event opening dan closing. Kamu bisa menemukan dokumentasi dari event tersebut dari halaman yang terkait dengan add-on "offCanvas". Berikut adalah intipan yang kita gunakan untuk mengubah ikonnya:

api.bind('opening', function() {
    $img.attr('src', 'arrows_remove.svg');
});
api.bind('closing', function() {
    $img.attr('src', 'arrows_hamburger.svg');
});

Melampaui event di atas, ada juga beberapa yang bisa dimainkan (misalnya event opened dan closed) yang bisa jadi berguna untuk proyekmu sendiri.

Mengganti Lebar Bawaan

Untuk mengganti lebar bawaan dari menu, kita bisa menggunakan baik CSS maupun Sass (dengan memofdikasi berkas sumbernya). Secara bawaan, nilai properti min-width dan max-width sama dengan 140px dan 440px. Di demo kita, mari lihat cara kita bisa mengubah nilai max-width melalui CSS. Berikut adalah aturan CSS yang perlu ditimpa:

.mm-menu {
    max-width: 350px; 
}
    
/**
 * add more vendor prefixes
 * depending on the browsers you're targeting
 */

@media all and (min-width: 550px) {
    html.mm-opening .mm-slideout {
        transform: translate(350px, 0); 
    } 
}
    
/**
 * override this rule
 * in case you're building a right menu
 */

@media all and (min-width: 550px) {
    html.mm-right.mm-opening .mm-slideout {
        transform: translate(-350px, 0);
    }
}

Perubahan CSS Tambahan

Pada titik ini, kita akan lanjut mengubah penampilan dari menu. Sekali lagi, kita akan mengubah berkas sumber Sass untuk memodifikasi styles sesuai kebutuhan kita. Perhatikan aturan yang akan kita timpa berikut (untuk kesederhanaan, saya telah membuang nilai dari bariabel Sass):

.mm-menu {
    background: darken($main-color, 10%);
}
  
.mm-listview > li > a {
    color: $text-color;
    padding: 20px;
}

.mm-listview > li > a:hover,
.mm-listview .mm-next.mm-fullsubopen:hover + a {
    color: $highlight-color;
}

.mm-listview > li > a:hover span {
    color: $text-color;
}

.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next) {
    background: transparent url(arrows_check.svg) no-repeat center right 10px;
    background-size: 30px 30px;
    text-decoration: line-through;
}

Perhatikan aturan yang paling terakhir. Tiap kali kita mengklik item menu, dia menerima class mm-selected, sehingga kita bisa menggunakan selector tersebut untuk memberinya gaya. Tapi kita hanya ingin mendesain item paling terakhir di proses seleksi, sehingga kita akan menunjuk ke satu yang tidak memiliki class mm-next.

next link styles — "About" akan membawa ke submenu di kanan, tapi kita baru mendesain tautan yang diklik terakhir

Menambah Ekstensi dan Add-on

Di bagian sebelumnya, kita melihat cara menginisialisasi plugin-nya. Sekarang, mari perluar perilaku dan fungsionalitasnya dengan menimpa aturan konfigurasi bawaan.

Pertama, kita mengganti judul yang muncul di atas panel utama.

Selanjutnya, kita menambahkan add-on "counters" dan "off-canvas". add-on yang terkahir ini mengizinkan kita untuk mengubah posisi menu secara relatif ke halaman.

Terakhir, kita menambahkan tiga ekstensi. Perhatikan kode inisialisasi terkahir berikut:

$menu.mmenu({
    counters: true,
    navbar: {
        title: "Menu Content"
    },
    extensions: ["pageshadow", "effect-zoom-menu", "effect-zoom-panels"],
    offCanvas: {
        position  : "right",
        zposition : "back"
    }
});

Kesimpulan

Pada panduan ini, kita telah melalui proses pembuatan menu off-canvas menggunakan plugin jQuery.mmenu. Tahap selanjtunya, perhatikan sumber lengkap demo ktia di CodePen. Lalu, saya sarangkan kamu pergi ke halaman resmi jQuery.mmenu dan lihat aneka contoh interaktif yang tersedia. Tunjukkan pada kami contohmu di komentar!