Vytvorte inteligentnú navigačnú ponuku s týmto doplnkom jQuery
Každá moderná lokalita potrebuje a odpovedajúce usporiadanie a a použiteľná navigácia. To je daný.
Hamburgerové ponuky však môžu ísť až tak ďaleko a oni radikálne zmeniť použiteľnosť pre rôzne veľkosti obrazovky. Lepší spôsob, ako to zvládnuť, je postupne skrýva odkazy s doplnkom, ako je OkayNav.
Tento bezplatný doplnok jQuery pridá veľmi jednoduchú funkciu v ponuke na každú stránku a tonízka skrytie navigačných položiek, založené na rôznych výrezoch. Takto používatelia chytrých telefónov majú menu s jedným hamburgerom, ale užívatelia tabletov môžu vidieť aj niekoľko odkazov.
Predvolene sa spolieha na a element a a dlhý neusporiadaný zoznam. Zatiaľ nemyslím, že tento plugin podporuje viacúrovňové dropdowny, ale ak viete trochu jQuery, môžete to pridať sám.
OkayNav je veľmi jednoduchý a je to určené na jednoduchšie webové stránky ktoré majú iba niekoľko navigačných odkazov. Tieto odkazy pomaly sa schováva za menu mimo obrazovky keď narazia na určitý výrez a viac odkazov sa skrýva tým menší je prehliadač.
Budete musieť zabaliť váš neusporiadaný zoznam v navigačnom prvku a poskytnite mu špecifický identifikátor. Potom môžete zacieľte na celú loď s okayNav () funguje takto:
var navigácia = $ ('# nav-main') okayNav (); Toto je len poznámka najjednoduchšie nastavenie bez vlastných funkcií. Môžete pracovať s cez tucet vlastných možností zabudovaný do tejto knižnice na ovládanie štýlu ikony, animácie v ponuke, podpory prstov a funkcií spätného volania.
Môžete dokonca zavolať do menu otvoriť / zatvoriť podľa želania odovzdaním špecifických hodnôt funkcii. Tu je jednoduchý príklad otvorte navigáciu:
navigation.okayNav ( 'openInvisibleNav');
Všetky tieto kódy sú dobre zdokumentované v GitHub repo ktorý tiež obsahuje prevzatie skriptu. Ak uprednostňujete trasu CDN, môžete tiež použiť RawGit odkaz pridať tento skript priamo od spoločnosti GitHub.
OkayNav je skvelé pre menšie stránky ktoré profitujú z progresívnej techniky navigácie. Ale ak si stále nie ste istí, ako to funguje, pozrite sa na toto demo na CodePen, ktoré ukazuje, čo môže tento malý plugin urobiť.
