Lag Responsive Menu med Responsive-Nav.js Plugin

Det er flere måter å lage navigasjonsmenyer med en responsiv funksjon, det vil si at den reagerer med alle enhetene der nettstedet kan vises.
Men problemet er at mange av disse skjemaene ikke er fullt kompatible med noen nettlesere hvis CSS3 brukes til å utføre denne oppgaven.
Takket være Javascript kan vi gjøre denne typen effekter og animasjoner mye mer kompatible med nettlesere og dermed gi dem den nødvendige støtten.
I denne opplæringen vil vi se hvordan du lager en fullt responsiv navigasjonslinje ved hjelp av Javascript Responsive Nav -pluginet.
Denne pluginen er åpen kildekode, og vi kan bruke den i ethvert prosjekt, den følger med stilarket for å kunne tilpasse den, og den er helt avhengig av andre Javascript -biblioteker som jQuery.
I HTML trenger vi bare å lage en liste for å bruke menyen og gi den en identifikator for å kunne velge den gjennom skriptet som kreves av programtillegget.
Vi kobler også Responsive Nav -pluginen og kobler den til dokumentet. Denne kan lastes ned fra den offisielle siden eller direkte på Github, vi kan bare laste ned .js -filen, eller hvis du vil kan du laste ned hele .zip -filen, for dette opplæring Jeg vil bare bruke filen responsive-nav.min.js.
Vi lager et demo -nettsted som vi kaller responsive.html

 Responsiv navigasjon

Start
Om
Tjenester
Blogg
Ta kontakt med

Lorem ipsum smerte sitter amet, consectetuer adipiscing.

Be egestas, ante et vulputate volutpat

Deretter legger vi til css i en styles.css -fil med følgende kode

 body {margin: 0; polstring: 0; bakgrunn: # 3d3d3d; font-family: Arial, sans-serif; } img {maks-bredde: 100%; } #content {bakgrunn-farge: # E6E6FA; margin: 20px auto 0; polstring: 20px; bredde: 80%; } #nav {bakgrunn-farge: # 4C76AE; } #nav ul {margin: 0; polstring: 0; bredde: 100%; display: blokk; liste-stil: ingen; } #nav ul li {bredde: 100%; display: blokk; liste-stil: ingen; } #nav ul li a {display: block; polstring: 10px 9px; bredde: 100%; skriftstørrelse: 1.1em; font-weight: normal; bakgrunn: # 4c76ae; farge: # cad7ea; tekst-dekorasjon: ingen; } #nav ul li a: sveve {bakgrunn: # 00567f; } .js #nav {klipp: rect (0 0 0 0); maks-høyde: 0; posisjon: absolutt; display: blokk; overløp: skjult; zoom: 1; } # nav. åpnet {maks-høyde: 9999px; } # nav-toggle {font-size: 1.2em; font-weight: fet skrift; polstring: 3px 9px; margin-venstre: 15px; tekst-dekorasjon: ingen; kant-radius: 3px; farge: #fefefe; bakgrunn: # 4c7ab6; margin-bunn: 15px; }

Frem til her vil det være det generelle stilarket, nå skal vi lage et stilark som vil tilpasse menyen hvis skjermen er redusert til 640 piksler eller mindre, for dette bruker vi noen stiler i egenskapen Media Queries for css3 som skal brukes på enheter med minimum oppløsning på 640 piksler. Hvis oppløsningen er høyere, vil den definerte generelle cssen bli brukt.

 @media-skjerm og (min-bredde: 640px) {.js #nav {posisjon: relativ; } .js # nav.closed {maks-høyde: ingen; } # nav-toggle {display: none; } #nav ul li a {border-right: 1px solid # 5E88BF; display: blokk; flyte: venstre; bredde: auto; bakgrunn: ingen; polstring: 11px 15px; font-weight: normal; tekst-dekorasjon: ingen; farge: # E6E6FA; } #nav ul li a: sveve {bakgrunn: # 00567f; farge: # cad7ea; } h1 {farge: # 90b9a0; skriftstørrelse: 2,5 em; tekstjustering: senter; }}

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng