Wie man ein Responsive Navigationsmenü erstellen Nur Mit CSS - Medialoot
Ein flexibles, Mehrzweck- Navigationsmenü.
Der Code, den wir schaffen enthält nur die wichtigsten CSS für Struktur und grundlegende Styling erforderlich. Dies macht es viel einfacher zu folgen und den Zweck jeder Zeile des Codes zu verstehen. Es bedeutet auch, dass das Endprodukt grundiert und bereit für Ihre einzigartige Anpassung.
A Quick Message
Zunächst einmal einige grundlegende Styling der ul und li Elemente Aufzählungszeichen und andere Listenstile zu entfernen. Der Inline-Block und float: links Attribute die Listenanzeige horizontal zu machen.
Die folgenden Attribute sind fast ausschließlich für Ästhetik. Wenn Sie beabsichtigen, dieses Menü nach Ihren Wünschen zu gestalten, dann ist dies der Abschnitt des Codes hantieren mit.
Weiter oben, einige Styling für die Drop-Down-Links. Die erste Klasse legt fest, dass die Drop-Down-standardmäßig nicht sichtbar. Und die letzte Klasse sagt, dass das Drop-down-Element sichtbar auf Top-Level-Link schweben werden wird.
Das Navigationsmenü ist nun für den Desktop-Einsatz bereit, aber wir sollten auch etwas Liebe für mobile Nutzer enthalten. Mit Hilfe eine Medienabfrage Ziel I-Geräte mit einer maximalen Breite von 760px und ein paar Änderungen am Code vornehmen.
Optional Schritt
Der Raum ist auf mobile Geräte beschränkt, so dass es wäre cool, wenn wir auch einen Knopf aufgefordert mobile Benutzer hatte eine Schaltfläche klicken, bevor das gesamte Menü angezeigt wird. dies ein paar Zeilen Code in die HTML zu tun, wo Sie auf die Schaltfläche angezeigt werden soll.
Fügen Sie den folgenden Code in den CSS überall außerhalb der Medienabfrage:
Und dieser Code in der Medienabfrage:
Vollständiger Code
Fazit - Live Demo
Pre-Coded Ressourcen
Liebe das Tutorial, aber immer noch wollen alles schön verpackt? Wir haben dann für Sie ein paar Ressourcen bekommen.
5 CSS Navigation Menüleisten
Dieses Premium-Paket umfasst 5 einzigartige Navigationsmenüleiste Design, die leicht in der bestehenden Designkonzepte codierter Projekte umgesetzt werden können.
Wohnung CSS3 Menüleisten
Dieses Premium-Paket enthält 2 stilvolle Menüs Web-Navigation, codierten mit HTML5 und CSS3 vollständig. Sie sind sehr modern und einfach in Ihre Designs zu bearbeiten und zu implementieren.
Ziemlich CSS3 Menüleisten
Dieses Premium-Paket enthält 2 super schlanke Menüs Web-Navigation, HTML5 und CSS3 vollständig codiert werden. Auch in dem Paket enthalten ist die ursprüngliche .psd Quelldatei für Ihre Design-Konzepte.
Weiterführende Literatur
Wenn Ihnen dieser Artikel gefallen könnte man auch diese mögen, überprüfen Sie ‚em out:
Teile diesen Beitrag
Wollen Sie uns helfen? Wenn Sie diesen Artikel genossen würden wir wirklich einen schnellen Aktie zu schätzen wissen. Jede Aktie macht einen großen Unterschied und hilft uns, mehr Tutorien und Inhalte zu schreiben. Vielen Dank!