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.
Rengjør rotete HTML-koder med HTML-vaskemaskin
Hvis du redigerer andres nettsider eller ønsker å kopiere en kode med et layout, kan det være vanskelig å legge seg gjennom formateringen . Du må rydde opp mange rotete områder, og dette er ikke morsomt å gjøre manuelt.Med HTML Washer web-appen kan du automatisk rydde opp en HTML-kode med et klikk på en knapp.Denne we
(Tekniske og design tips)
Nanoreset - Den minste CSS Reset som veier mindre enn 1KB
De fleste utviklere vil aldri ha lyst til å bygge et nettsted helt fra bunnen av. Dette etterlater to alternativer: arbeid med en frontend ramme eller bruk en tilpasset tilbakestilling.Den mest populære tilbakestillingen er Normalisere hvilke formater som alle nettlesere standardiserer, det samme, noe som gjør det lettere å holde konsistens på forskjellige OS og nettlesere.Hvis
(Tekniske og design tips)