Membina Accessible Sliding Hamburger Menus dengan Offcanvas

Percuma Plugin Offcanvas adalah salah satu daripada banyak sumber untuk navigasi gelongsor. Anda boleh mencari sekumpulan plugin serupa dalam talian tetapi Offcanvas menonjol untuk beberapa sebab.

Ianya adalah perpustakaan yang agak ringan dan semasa ia berjalan di jQuery itu juga tidak begitu sukar untuk ditubuhkan. Ini adalah benar untuk kedua-dua kod JavaScript dan kod HTML, jadi anda tidak perlu menukar navigasi lalai anda sama sekali.

Plugin Offcanvas membolehkan anda tetapkan kawasan tertentu di mana menu sepatutnya muncul. Secara lalai, ini biasanya sebelah kiri atau kanan skrin, tetapi anda juga boleh memilih bahagian atas atau bawah skrin juga.

Ini menjadikan Offcanvas hebat untuk lebih lagi daripada hanya menu hamburger gelongsor. Ia boleh digunakan untuk bar pemberitahuan gelongsor atau bahkan bidang opt-in untuk menangkap e-mel.

Setiap panel berfungsi dengan cara yang sama di mana pengguna boleh klik di mana sahaja di halaman untuk menyembunyikan menu gelongsor. Dan, anda boleh sediakan arahan papan kekunci yang mematuhi garis panduan ARIA untuk akses web yang betul.

Untuk memasang Offcanvas, anda hanya perlu satu salinan jQuery bersama dengan Fail CSS / JS Offcanvas. Anda boleh tarik ini melalui npm, bower, atau terus dari GitHub.

Juga pada halaman GitHub, anda akan lihat sedikit kod sampel anda boleh melakukan kerja semula untuk disesuaikan dengan laman web anda. Apa yang anda perlukan untuk nav gelongsor ialah