Lag smartere Responsive Navigasjonsmeny med dette jQuery Plugin
Hvert moderne nettsted trenger a responsiv layout og a brukbar navigasjon. Det er en gitt.
Men hamburger menyer kan bare gå så langt og de endre brukbarheten radikalt for varierende skjermstørrelser. Den bedre måten å håndtere dette er på gradvis gjemmer lenker med et plugin som OkayNav.
Dette gratis jQuery-plugin legger til en veldig enkel menyfunksjon til hvilken som helst side og det slowly skjuler navigasjonsartikler, basert på ulike visningsportaler. På denne måten bruker smarttelefonbrukere den eneste hamburgermenyen, men nettbrettet kan også se noen få koblinger.
Som standard er det avhengig av en element og a lang uordnet liste. Så langt tror jeg ikke dette pluginet støtter multi-level dropdowns, men hvis du vet litt av jQuery kan du legge til dette selv.
OkayNav er ekstremt enkelt og det er ment for enklere nettsteder som bare har en håndfull navigasjonsforbindelser. Disse koblingene Skjul sakte bak en skjermmeny når de treffer en viss visningsport og flere lenker holder seg gjemt Jo mindre nettleseren får.
Du må pakk inn uordnet liste i et navigasjonselement og gi det en bestemt ID. Da kan du mål hele naven med okayNav () fungere som dette:
varnavigasjon = $ ('# nav-main'). okayNav (); Merk dette er bare enkleste oppsettet uten noen egendefinerte funksjoner. Du kan jobbe med over et dusin tilpassede alternativer innebygd i dette biblioteket for å styre ikonstilen, menyanimasjonen, swipe support og tilbakeringingsfunksjonene.
Og du kan til og med ringe på menyen til Åpne / lukk ved vilje ved å sende bestemte verdier til funksjonen. Her er et enkelt eksempel på åpne navigasjonen:
navigation.okayNav ( 'openInvisibleNav');
Alle disse kodene er godt dokumentert i GitHub repo som også inkluderer nedlasting av skriptet. Hvis du foretrekker CDN-ruten, kan du også bruke RawGit-lenken å legge til dette skriptet direkte fra GitHub.
OkayNav er flott for mindre steder som drar nytte av den progressive navigasjonsteknikken. Men hvis du fortsatt er usikker på hvordan dette fungerer, sjekk ut denne demonstrasjonen på CodePen som viser hva denne lille plugin-modulen kan gjøre.
