Opret Responsive Menu med Responsive-Nav.js Plugin

Der er flere måder at oprette navigationsmenuer med en responsiv funktion, det vil sige, at den reagerer med alle de enheder, hvor webstedet kan ses.
Men problemet er, at mange af disse former ikke er fuldt ud kompatible med nogle browsere, hvis CSS3 bruges til at udføre denne opgave.
Takket være Javascript kan vi gøre denne type effekter og animationer meget mere kompatible med browsere og dermed give dem den nødvendige støtte.
I denne vejledning vil vi se, hvordan man laver en fuldt lydhør navigationslinje ved hjælp af Javascript Responsive Nav -plugin.
Dette plugin er open source, og vi kan bruge det i ethvert projekt, det leveres med sit typografiark for at kunne tilpasse det, og det er helt afhængigt af andre Javascript -biblioteker såsom jQuery.
I HTML skal vi kun oprette en liste for at bruge menuen og give den en identifikator for at kunne vælge den via det script, der kræves af pluginet.
Vi forbinder også Responsive Nav -pluginet og linker det til dokumentet, dette kan downloades fra dets officielle side eller direkte på Github, vi kan kun downloade .js -filen, eller hvis du vil, kan du downloade hele .zip -filen, for dette tutorial Jeg vil kun bruge filen responsive-nav.min.js.
Vi opretter et demo -websted, som vi kalder responsive.html

 Responsiv navigation

Start
Om
Services
Blog
Kontakt

Lorem ipsum smerter sidder amet, consectetuer adipiscing.

Be egestas, ante et vulputate volutpat

Derefter tilføjer vi css i en styles.css -fil med følgende kode

 krop {margen: 0; polstring: 0; baggrund: # 3d3d3d; font-family: Arial, sans-serif; } img {max-width: 100%; } #content {baggrundsfarve: # E6E6FA; margen: 20px auto 0; polstring: 20px; bredde: 80%; } #nav {baggrundsfarve: # 4C76AE; } #nav ul {margin: 0; polstring: 0; bredde: 100%; display: blok; liste-stil: ingen; } #nav ul li {bredde: 100%; display: blok; liste-stil: ingen; } #nav ul li a {display: blok; polstring: 10px 9px; bredde: 100%; skrifttype: 1.1em; font-vægt: normal; baggrund: # 4c76ae; farve: # cad7ea; tekst-dekoration: ingen; } #nav ul li a: svæve {baggrund: # 00567f; } .js #nav {klip: rect (0 0 0 0); max-højde: 0; position: absolut; display: blok; overløb: skjult; zoom: 1; } # nav. åbnet {max-højde: 9999px; } # nav-toggle {font-size: 1.2em; skrifttype-vægt: fed; polstring: 3px 9px; margin-venstre: 15px; tekst-dekoration: ingen; grænse-radius: 3px; farve: #fefefe; baggrund: # 4c7ab6; margin-bund: 15px; }

Indtil her vil det være det generelle typografiark, nu vil vi oprette et typografiark, der vil tilpasse menuen, hvis skærmen reduceres til 640px eller mindre, til dette anvender vi nogle stilarter inden for egenskaben Media Queries for css3, der vil blive anvendt på enheder med en minimumsopløsning på 640px. Hvis opløsningen er højere, bruges den definerede generelle css.

 @medie-skærm og (min. bredde: 640px) {.js #nav {position: relativ; } .js # nav.closed {max-height: none; } # nav-toggle {display: none; } #nav ul li a {border-right: 1px solid # 5E88BF; display: blok; flyde: venstre; bredde: auto; baggrund: ingen; polstring: 11px 15px; font-vægt: normal; tekst-dekoration: ingen; farve: # E6E6FA; } #nav ul li a: svæve {baggrund: # 00567f; farve: # cad7ea; } h1 {farve: # 90b9a0; skrifttype: 2,5em; tekstjustering: center; }}

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt