Responsive Menü mit Responsive-Nav.js Plugin erstellen

Es gibt mehrere Möglichkeiten, Navigationsmenüs mit einer Responsive-Funktion zu erstellen, das heißt, dass sie mit allen Geräten reagiert, auf denen die Website angezeigt werden kann.
Das Problem ist jedoch, dass viele dieser Formulare mit einigen Browsern nicht vollständig kompatibel sind, wenn CSS3 für diese Aufgabe verwendet wird.
Dank Javascript können wir diese Art von Effekten und Animationen viel besser browserkompatibel machen und ihnen so die notwendige Unterstützung geben.
In diesem Tutorial sehen wir, wie Sie mit dem Javascript Responsive Nav-Plugin eine vollständig responsive Navigationsleiste erstellen.
Dieses Plugin ist Open Source und wir können es in jedem Projekt verwenden, es wird mit seinem Stylesheet geliefert, um es anpassen zu können, und es ist vollständig von anderen Javascript-Bibliotheken wie jQuery abhängig.
Im HTML müssen wir nur eine Liste erstellen, um das Menü zu verwenden, und ihm eine Kennung zuweisen, um es über das vom Plugin benötigte Skript auswählen zu können.
Wir verlinken auch das Responsive Nav-Plugin und verlinken es mit dem Dokument. Dies kann von seiner offiziellen Seite oder direkt auf Github heruntergeladen werden, wir können nur die .js-Datei herunterladen oder wenn Sie möchten, können Sie die gesamte .zip-Datei dafür herunterladen Tutorial Ich werde nur die Datei responsive-nav.min.js verwenden.
Wir erstellen eine Demo-Website, die wir responsive.html nennen

 Responsive Navigation

Start
Über
Dienstleistungen
Blog
Kontakt

Lorem ipsum Schmerzen sitzen amet, consectetuer adipiscing.

Sei egestas, ante et vulputate volutpat

Dann fügen wir das CSS in eine style.css-Datei mit dem folgenden Code ein

 Körper {Rand: 0; Polsterung: 0; Hintergrund: # 3d3d3d; Schriftfamilie: Arial, serifenlos; } img {max-Breite: 100%; } #content {Hintergrundfarbe: # E6E6FA; Rand: 20px Auto 0; Polsterung: 20px; Breite: 80%; } #nav {Hintergrundfarbe: # 4C76AE; } #nav ul {Rand: 0; Polsterung: 0; Breite: 100 %; Bildschirmsperre; Listenstil: keine; } #nav ul li {Breite: 100%; Bildschirmsperre; Listenstil: keine; } #nav ul li a {display: block; Polsterung: 10px 9px; Breite: 100 %; Schriftgröße: 1.1em; Schriftstärke: normal; Hintergrund: # 4c76ae; Farbe: # cad7ea; Textdekoration: keine; } #nav ul li a: hover {Hintergrund: # 00567f; } .js #nav {clip: rect (0 0 0 0); Max-Höhe: 0; Position: absolut; Bildschirmsperre; Überlauf versteckt; Zoom: 1; } # nav.opened {max-height: 9999px; } # nav-toggle {font-size: 1.2em; Schriftdicke: fett; Polsterung: 3px 9px; Rand links: 15px; Textdekoration: keine; Randradius: 3px; Farbe: #fefefe; Hintergrund: # 4c7ab6; Rand-unten: 15px; }

Bis hierhin wird es das allgemeine Stylesheet sein, jetzt erstellen wir ein Stylesheet, das das Menü anpasst, wenn der Bildschirm auf 640px oder weniger reduziert wird, dafür wenden wir einige Stile innerhalb der Media Queries-Eigenschaft von css3 an, die angewendet werden auf Geräten mit einer Mindestauflösung von 640px. Bei höherer Auflösung wird das definierte allgemeine CSS verwendet.

 @media screen und (min-width: 640px) {.js #nav {position: relative; } .js # nav.closed {max-height: none; } # nav-toggle {Anzeige: keine; } #nav ul li a {border-right: 1px solid # 5E88BF; Bildschirmsperre; Schwimmer: links; Breite: automatisch; Hintergrund: keiner; Polsterung: 11px 15px; Schriftstärke: normal; Textdekoration: keine; Farbe: # E6E6FA; } #nav ul li a: hover {Hintergrund: # 00567f; Farbe: # cad7ea; } h1 {Farbe: # 90b9a0; Schriftgröße: 2.5em; Textausrichtung: Mitte; }}

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben