Opret en smartere Responsive Navigation Menu med dette jQuery-plugin
Hvert moderne websted har brug for a responsivt layout og a brugbar navigation. Det er en given.
Men hamburger menuer kan kun gå så langt og de radikalt ændre brugervenlighed til varierende skærmstørrelser. Den bedre måde at håndtere dette er ved gradvist gemmer links med et plugin som f.eks OkayNav.
Denne gratis jQuery-plugin tilføjer en meget simpel menufunktion til enhver side og den slowly skjuler navigationsartikler, baseret på forskellige visningsporte. På denne måde har smartphone-brugere en enkelt hamburger-menu, men tabletbrugere kan også se et par links.
Som standard afhænger den af en element og a langvarig uordnet liste. Indtil videre tror jeg ikke, at dette plugin understøtter dropdowns på flere niveauer, men hvis du ved lidt jQuery, kan du tilføje det selv.
OkayNav er ekstremt enkel, og det er beregnet til enklere websites der kun har en håndfuld navigationsforbindelser. Disse links Skjul langsomt bag en menu på skærmen når de ramte en vis viewport og flere links gemmer sig Jo mindre browseren får.
Du skal bruge Indpak din uordnede liste i et navigationselement og give det et bestemt id. Så kan du mål hele naven med okayNav () fungere som dette:
var navigation = $ ('# nav-main'). okayNav (); Bemærk dette er bare den enkleste opsætning uden nogen brugerdefinerede funktioner. Du kan arbejde med over et dusin brugerdefinerede valgmuligheder indbygget i dette bibliotek for at styre ikon stilen, menu animation, swipe support og tilbagekald funktioner.
Og du kan endda kalde menuen til åben / tæt ved vilje ved at overføre specifikke værdier til funktionen. Her er et simpelt eksempel på Åbn navigationen:
navigation.okayNav (openInvisibleNav ');
Alle disse koder er veldokumenterede i GitHub repo som også indeholder en download af scriptet. Hvis du foretrækker CDN-ruten, kan du også bruge RawGit link at tilføje dette script direkte fra GitHub.
OkayNav er fantastisk til mindre steder der nyder godt af den progressive navigationsteknik. Men hvis du stadig er usikker på, hvordan dette virker, skal du tjekke denne demo på CodePen og vise, hvad denne lille plugin kan gøre.
