Buat Menu Navigasi Responsif yang Lebih Baik dengan Plugin jQuery ini

Setiap tapak moden memerlukan a susun atur responsif dan a navigasi yang boleh digunakan. Itulah yang diberikan.

Tetapi, menu hamburger hanya boleh pergi sejauh ini dan mereka radikal mengubah kebolehgunaan untuk saiz skrin yang berbeza-beza. Cara yang lebih baik untuk mengendalikan ini adalah dengan secara beransur-ansur menyembunyikan pautan dengan plugin seperti OkayNav.

Plugin jQuery percuma ini menambah ciri menu yang sangat mudah ke mana-mana halaman dan iamenyembunyikan item navigasi yang rendah, berdasarkan pada pemandangan pandangan yang berbeza. Dengan cara ini pengguna telefon pintar mempunyai menu hamburger tunggal tetapi pengguna tablet dapat melihat beberapa pautan juga.

Secara lalai, ia bergantung kepada a

elemen dan a senarai tidak teratur panjang. Setakat ini, saya tidak fikir plugin ini menyokong dropdown berbilang tingkat tetapi jika anda tahu sedikit jQuery anda boleh menambah sendiri.

OkayNav sangat mudah dan ia bertujuan untuk laman web yang lebih mudah yang hanya mempunyai beberapa pautan navigasi. Pautan ini perlahan-lahan bersembunyi di belakang menu di luar skrin sebaik sahaja mereka memukul pandangan dan lebih banyak pautan terus bersembunyi semakin kecil pelayar mendapat.

Anda perlu bungkus senarai tidak teratur anda dalam elemen navigasi dan beri ID khusus. Kemudian, anda boleh sasarkan seluruh tentera laut dengan okayNav () berfungsi seperti ini:

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

Perhatikan ini hanya persediaan yang paling mudah tanpa sebarang ciri tersuai. Anda boleh bekerjasama lebih sedozen pilihan peribadi dibina ke perpustakaan ini untuk mengawal gaya ikon, animasi menu, sokongan sapu, dan fungsi panggilan balik.

Dan, anda juga boleh memanggil menu itu buka / tutup pada kehendak dengan memberikan nilai-nilai tertentu kepada fungsi. Berikut adalah contoh mudah untuk buka navigasi:

 navigation.okayNav ('openInvisibleNav');

Semua kod ini didokumenkan dengan baik di dalam Repo GitHub yang turut memuat turun skrip. Jika anda lebih suka laluan CDN, anda juga boleh menggunakannya Pautan RawGit untuk menambah skrip ini secara langsung dari GitHub.

OkayNav adalah hebat untuk tapak yang lebih kecil yang mendapat manfaat daripada teknik navigasi progresif. Tetapi, jika anda masih tidak yakin bagaimana ini berfungsi, lihat demo ini di CodePen yang menunjukkan apa yang plugin kecil ini boleh lakukan.