Skapa responsiv meny med Responsive-Nav.js Plugin

Det finns flera sätt att skapa navigeringsmenyer med en responsiv funktion, det vill säga som svarar med alla enheter där webbplatsen kan ses.
Men problemet är att många av dessa formulär inte är helt kompatibla med vissa webbläsare om CSS3 används för att utföra denna uppgif.webpt.
Tack vare Javascript kan vi göra denna typ av effekter och animationer mycket mer kompatibla med webbläsare och därmed ge dem nödvändigt stöd.
I den här självstudien kommer vi att se hur du skapar en fullt responsiv navigeringsfält med Javascript Responsive Nav -plugin.
Det här tillägget är öppen källkod och vi kan använda det i alla projekt, det kommer med ett stilark för att kunna anpassa det och det är helt beroende av andra Javascript -bibliotek som jQuery.
I HTML behöver vi bara skapa en lista för att använda menyn och ge den en identifierare för att kunna välja den via det skript som krävs av plugin -programmet.
Vi länkar också till Responsive Nav -pluginet och länkar det till dokumentet, detta kan laddas ner från dess officiella sida eller direkt på Github, vi kan bara ladda ner .js -filen eller om du vill kan du ladda ner hela .zip -filen, för detta självstudie Jag kommer bara att använda filen responsive-nav.min.js.
Vi skapar en demosida som vi kallar responsive.html

 Responsiv navigering

Start
Handla om
Tjänster
Blogg
Kontakt

Lorem ipsum smärta sitter amet, consectetuer adipiscing.

Be egestas, ante et vulputate volutpat

Sedan lägger vi till css i en styles.css -fil med följande kod

 kropp {marginal: 0; vaddering: 0; bakgrund: # 3d3d3d; font-family: Arial, sans-serif; } img {max-bredd: 100%; } #content {bakgrund-färg: # E6E6FA; marginal: 20px auto 0; vaddering: 20px; bredd: 80%; } #nav {bakgrund-färg: # 4C76AE; } #nav ul {marginal: 0; vaddering: 0; bredd: 100%; display: block; liststil: ingen; } #nav ul li {bredd: 100%; display: block; liststil: ingen; } #nav ul li a {display: block; vaddering: 10px 9px; bredd: 100%; typsnitt: 1.1em; font-weight: normal; bakgrund: # 4c76ae; färg: # cad7ea; text-dekoration: ingen; } #nav ul li a: sväva {bakgrund: # 00567f; } .js #nav {klipp: rect (0 0 0 0); maxhöjd: 0; position: absolut; display: block; överflöd: dold; zoom: 1; } # nav. öppnade {maxhöjd: 9999px; } # nav-toggle {font-size: 1.2em; font-weight: fet; vaddering: 3px 9px; marginal-vänster: 15px; text-dekoration: ingen; gränsradie: 3px; färg: #fefefe; bakgrund: # 4c7ab6; marginal-botten: 15px; }

Hittills kommer det att vara det allmänna stilarket, nu kommer vi att skapa ett stilblad som anpassar menyn om skärmen reduceras till 640 pixlar eller mindre, för detta tillämpar vi vissa stilar inom egenskapen Media Queries för css3 som kommer att tillämpas på enheter med minsta upplösning på 640 pixlar. Om upplösningen är högre kommer den definierade allmänna css att användas.

 @media-skärm och (minbredd: 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: block; flyta till vänster; bredd: auto; bakgrund: ingen; vaddering: 11px 15px; font-weight: normal; text-dekoration: ingen; färg: # E6E6FA; } #nav ul li a: sväva {bakgrund: # 00567f; färg: # cad7ea; } h1 {färg: # 90b9a0; typsnitt: 2,5em; text-align: center; }}

Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng