Buat Menu Navigasi Responsif yang Lebih Cerdas dengan Plugin jQuery ini

Setiap situs modern membutuhkan a tata letak responsif dan a navigasi yang dapat digunakan. Itu diberikan.

Tapi, menu hamburger hanya bisa sejauh ini dan mereka secara radikal mengubah kegunaan untuk berbagai ukuran layar. Cara yang lebih baik untuk menangani ini adalah dengan semakin menyembunyikan tautan dengan plugin seperti OkayNav.

Plugin jQuery gratis ini menambahkan fitur menu yang sangat sederhana ke halaman mana saja dan itu smenyembunyikan item navigasi, berdasarkan berbagai viewports. Dengan cara ini pengguna smartphone memiliki menu hamburger tunggal tetapi pengguna tablet dapat melihat beberapa tautan juga.

Secara default, ini bergantung pada a

elemen dan a daftar unordered yang panjang. Sejauh ini, saya tidak berpikir plugin ini mendukung dropdown multi-level tetapi jika Anda tahu sedikit jQuery Anda bisa menambahkan ini sendiri.

OkayNav sangat sederhana dan itu dimaksudkan untuk situs web yang lebih sederhana yang hanya memiliki sedikit tautan navigasi. Tautan ini bersembunyi perlahan di balik menu di luar layar sekali mereka menekan viewport tertentu dan lebih banyak tautan tetap bersembunyi semakin kecil peramban.

Anda harus melakukannya bungkus daftar unordered Anda dalam elemen navigasi dan berikan ID tertentu. Maka kamu bisa menargetkan seluruh nav dengan okayNav () fungsi seperti ini:

 navigasi var = $ ('# nav-main'). okayNav ();

Perhatikan ini hanya pengaturan paling sederhana tanpa fitur khusus. Anda bisa bekerja dengannya lebih dari selusin opsi khusus dibangun ke perpustakaan ini untuk mengontrol gaya ikon, animasi menu, dukungan gesek, dan fungsi panggilan balik.

Dan, Anda bahkan dapat memanggil menu buka / tutup sesuka hati dengan melewatkan nilai spesifik ke fungsi. Ini contoh sederhana untuk buka navigasi:

 navigation.okayNav ('openInvisibleNav');

Semua kode ini didokumentasikan dengan baik di Internet Repo GitHub yang juga termasuk unduhan skrip. Jika Anda lebih suka rute CDN, Anda juga bisa menggunakan Tautan RawGit untuk menambahkan skrip ini langsung dari GitHub.

OkayNav adalah bagus untuk situs yang lebih kecil yang mendapat manfaat dari teknik navigasi progresif. Tetapi, jika Anda masih tidak yakin bagaimana ini bekerja, lihat demo ini pada CodePen yang menunjukkan apa yang bisa dilakukan oleh plugin kecil ini.