Lag smartere Responsive Navigasjonsmeny med denne jQuery Plugin
Hvert moderne nettsted trenger et responsivt layout og en brukbar navigasjon . Det er en gitt.
Men hamburger menyer kan bare gå så langt, og de endrer brukbarheten for varierende skjermstørrelser radikalt . Den bedre måten å håndtere dette på er å gjemme gjenspeiler koblinger med et plugin som OkayNav .
Denne gratis jQuery-plugin legger til en veldig enkel menyfunksjon til en hvilken som helst side, og det er lavt skjuler navigasjonsartikler , basert på forskjellige visningsporte. På denne måten bruker smarttelefonbrukere den eneste hamburger-menyen, men nettbrettet kan også se noen få koblinger.
Som standard er det avhengig av en
element og en 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 skjuler sakte bak en skjermmeny når de treffer et visst visningsport, og flere koblinger holder skjul desto mindre nettleseren får.
Du må pakke inn uordnet liste i et navigasjonselement og gi den en bestemt ID. Deretter kan du målrette hele okayNav()
med funksjonen okayNav()
som denne:
varnavigasjon = $ ('# nav-main'). okayNav (); Merk dette er bare det enkleste oppsettet uten noen egendefinerte funksjoner. Du kan jobbe med over et dusin tilpassede alternativer som er innebygd i dette biblioteket for å kontrollere ikonstilen, menyanimasjonen, swipe support og tilbakeringingsfunksjonene.
Og du kan til og med ringe menyen for å åpne / lukke ved vilje ved å sende bestemte verdier til funksjonen. Her er et enkelt eksempel for å åpne navigasjonen :
navigation.okayNav ( 'openInvisibleNav'); Alle disse kodene er godt dokumentert i GitHub repo, som også inneholder en nedlasting av skriptet. Hvis du foretrekker CDN-ruten, kan du også bruke RawGit-lenken til å legge til dette skriptet direkte fra GitHub.
OkayNav er flott for mindre nettsteder som drar nytte av den progressive navigasjonsteknikken. Men hvis du fortsatt er usikker på hvordan dette fungerer, sjekk ut denne demoen på CodePen som viser hva denne lille plugin-modulen kan gjøre.
16 beste YouTube-kanaler for å begynne å lære webutvikling
Vil du være en webutvikler, men ikke sikker på hvor du skal begynne eller hvilket programmeringsspråk til å begynne med ? Det er mange ressurser du kan komme tilbake til for å begynne å lære språk som Swift eller rammer som AngularJS eller til og med responsiv design eller bare koding generelt, hvis du vet hvor du skal se (de er overalt på nettet).Deretter
(Tekniske og design tips)
Slik sammenligner du bildereduksjoner i Github
Med Git kan du ikke bare spore endringer i kode, du kan også sammenligne endringene (aka diff ). Og hvis revisjonene går galt, kan du enkelt gå tilbake til tidligere versjoner. Du kan også sammenligne kodeendringer enkelt og intuitivt med Github.Selv om det hovedsakelig brukes til å dele koder, prosjekter og bidrag fra utviklere, har Github en måte for deg å se historiske endringer og filsammenligninger. For å
(Tekniske og design tips)