Vytvorte prístupné Posuvné Hamburger Menu s Offcanvas

Voľný Offcanvas plugin je jedným z mnohých zdrojov pre posuvné navigácie. Môžete nájsť veľa podobných pluginov online, ale Offcanvas vyčnieva z niekoľkých dôvodov.

Je to pomerne ľahká knižnica a zatiaľ čo to beží na jQuery je to tiež nie je veľmi ťažké nastaviť. Platí to pre kód JavaScript aj kód HTML, takže vôbec nebudete musieť zmeniť predvolenú navigáciu.

Zásuvný modul Offcanvas vám umožní označte určité oblasti, kde by sa mala zobraziť ponuka. V predvolenom nastavení je to obvykle ľavá alebo pravá strana obrazovky, ale môžete tiež vybrať hornú alebo dolnú časť obrazovky.

To robí Offcanvas skvelé pre viac ako len posúvanie ponuky hamburgerov. Môže byť použitý posuvné oznamovacie pruhy alebo dokonca prihlásenie do poľa na zachytenie e-mailov.

Každý panel funguje rovnakým spôsobom ako používateľ kliknite na ľubovoľné miesto na stránke, aby ste skryli posuvnú ponuku. A môžete nastavenie príkazov klávesnice ktoré fungujú v súlade s pravidlami ARIA pre správnu dostupnosť webu.

Ak chcete nainštalovať produkt Offcanvas, stačí kópiu jQuery spolu s Súbory CSS / JS mimo kanála. Môžete ťahať cez npm, bower alebo priamo z GitHub.

Aj na stránke služby GitHub pozrite časť vzorového kódu môžete prepracovať tak, aby vyhovovali vašim webovým stránkam. Všetko, čo potrebujete pre posuvnú loď, je