Heute haben wir ein weiteres fantastisches Schritt für Schritt CSS-Projekt für Sie! Dieses Mal werden wir ein sehr nützliches erweitertes vertikales Navigationsmenü erstellen. Es ist eine großartige Möglichkeit, viele Links auf relativ kleinem Raum auszublenden. Die Animationen verleihen Ihrer Website eine nette Note.
Selbst wenn Sie ein absoluter Anfänger sind, sollten Sie dies schaffen. Ich werde Sie bei jedem Schritt des Weges begleiten und erklären, wie jeder Codeabschnitt funktioniert, damit Sie dieselben Techniken in zukünftigen Projekten implementieren und Ihr Verständnis von CSS vertiefen können. Lass uns anfangen!
Das Konzept
Bevor wir mit dem Programmieren beginnen, ist es immer hilfreich, das grobe Konzept dessen, was Sie erreichen möchten, so zu definieren, dass Sie Ihren Verstand mit dem zu tun haben, was damit zu tun hat. Das Element, das wir heute erstellen, ist ein vertikales Navigationsmenü, das sich in einer Art modifiziertem Akkordeon-Format befindet (einen kleinen Einblick in das fertige Produkt erhalten Sie hier).
Wie Sie sehen, sind die unteren Bereiche standardmäßig geschlossen und werden nach dem Öffnen geöffnet. Um einige schöne Variationen hinzuzufügen, fügen wir auch einen Abschnitt hinzu, der ständig geöffnet bleibt. Im Hauptbereich, der immer geöffnet ist, werden wir eine kurze Begrüßungsnachricht einfügen, und in den Abschnitten, die geöffnet werden, befinden sich Unterabschnitte der Navigationslinks.
Nun, da wir eine gute Vorstellung davon haben, wohin wir gehen, beginnen wir mit der Struktur in unserem HTML-Code.
Das HTML
Das erste, was wir tun werden, ist ein schönes HTML5, um das Menü einzubinden. Das neue Element nav bietet einen wunderschönen semantischen Container für unser Menü.
Lassen Sie uns nun überlegen, wie unser Menü strukturiert wird. Wir werden nicht nur eine Liste von Links haben, sondern jede Leiste repräsentiert einen Link mit einem zusätzlichen Bereich darunter. Wir packen diese in ein div ein. Dann benötigen wir in jedem Div einen Hauptlink (die farbige Leiste) und eine Liste von Unterlinks (den weißen Bereich). Unter der Annahme, dass dieses Element in eine Site mit einem Standardstil eingefügt wird, legen wir willkürlich h4 für den Hauptlink und eine einfache ungeordnete Liste für den Rest fest.
Wir können diesen Codeabschnitt kopieren, einfügen und ändern, um die verschiedenen Teile unseres Navigationsmenüs zu erstellen. Hier haben wir einen Portfolio-, Info- und Kontakt-Abschnitt mit jeweils drei Unterlinks. Jeder Abschnitt erhält dieselbe Klasse (Menüelement), sodass wir sie auf einmal gestalten können.
Ich wollte mich zuerst auf diese Bereiche konzentrieren, da sie alle gleich sind. Denken Sie jedoch daran, dass der obere Abschnitt sich in Funktionalität und Inhalt unterscheidet. Anstelle einer ungeordneten Liste enthält sie einen Absatz. Wir fügen außerdem eine einzigartige Klasse hinzu, um das Targeting in CSS zu vereinfachen.
Damit sind wir mit dem HTML-Code bereits fertig. Die Live-Vorschau zeigt die Hierarchie unseres Navigationsmenüs perfekt an, obwohl sie überhaupt nicht gestaltet ist. Hier können Sie deutlich sehen, wie unser Menü beginnt, Form anzunehmen.
Basis-Styles
Um mit dem Menü-Styling zu beginnen, müssen wir einige Grundlagen festlegen. Zuerst werden die Standardränder und die Auffüllung gelöscht. Wir werden die Divs direkt nebeneinander ausreißen, so dass jeder Standardbrowserabstand das Layout ruiniert.
Als Nächstes wenden wir eine einfache Farbe auf den Hintergrund an, damit die weißen Bereiche unseres Menüs hervorstechen. Dann geben wir einige grundlegende Schriftstile ein und fügen dem Menü einen leichten Schatten hinzu. Beachten Sie, dass der im Nav-Block festgelegte Rand das Menü auf der Seite zentriert. Dies dient nur zu Anzeigezwecken und sollte entfernt werden, wenn Sie das Menü in Position bringen möchten.
Schließlich fügen wir den Navigations- und Menüelement-Selektoren einige Bemaßungen und Hintergrundfarben hinzu. Hier ist der resultierende Code:
In diesem Punkt sieht die Vorschau so aus, als hätten wir mehr Schaden als Gutes angerichtet, aber keine Angst, sie wird in kürzester Zeit schick aussehen.
Header-Stile
Jetzt ist es an der Zeit, unsere h4-Tags zu gestalten und in die horizontalen Balken umzuwandeln, die wir in unserem Modell gesehen haben. Dafür benötigen wir nur ein wenig Polsterung und eine Hintergrundfarbe. Während wir hier sind, können wir auch mit der Typografie beginnen. Wir erben die Schriftfamilie, die wir zuvor eingerichtet haben, und müssen diese nicht erneut eingeben. Stattdessen müssen wir nur eine Größe und ein Gewicht festlegen.
Wie Sie in der Abbildung unten sehen können, überschreiben unsere Linkstile immer noch einige der hier eingestellten Textstile, sodass wir diese als nächstes korrigieren müssen.
Header-Links
Natürlich ist der blaue Link nicht gut, also müssen wir ihn in Weiß ändern. Wir möchten auch jede Textdekoration (die Unterstreichung) aufheben. Jetzt könnten wir hier aufhören, aber das Standardverhalten wäre, dass nur der Text angeklickt werden kann und nicht die gesamte Leiste, was nicht ideal ist. Um die gesamte Leiste zu einem Link zu machen, setzen wir die Anzeigeeigenschaft auf Block und die Breite auf die volle Menügröße (200px).
Jetzt sieht unser farbiger Balken viel besser aus. Hier ist die Vorschau:
Schön machen
Wenn Sie bei etwas Einfachem bleiben möchten, können Sie diesen Schritt überspringen, aber ich werde darauf stoßen und ein paar visuelle Verbesserungen hinzufügen. Gehen Sie zurück und ändern Sie den Header-Stilblock so, dass er einen Verlauf und einige sehr subtile Ränder enthält. Sie werden wahrscheinlich nicht in der Lage sein, die Grenzen erst zu erkennen, wenn das Menü geschlossen ist, aber zusammen mit den Farbverläufen werden sie wirklich helfen, jeden Abschnitt zu unterscheiden, so dass sie nicht alle wie ein großer Block aussehen.
Hover-Stile
Als Nächstes fügen wir den Bar-Links einen subtilen Hover-Stil hinzu. Alles, was wir tun werden, ist, die Farben des Verlaufs ein wenig zu verändern, damit sie heller werden, wenn Sie schweben.
Absatzstile
Denken Sie daran, dass der erste Eintrag in unserem Menü einen Absatz und keine ungeordnete Liste enthält. Als nächstes greifen wir diesen an, um ihn schön aussehen zu lassen. Die Listen enthalten einen beträchtlichen Teil des Codes, aber der Absatz erfordert kaum etwas. Definieren Sie einfach die Größe und Farbe, und geben Sie dann einige Füllungen ein.
Der obere Teil sieht jetzt gut aus! Sowohl die Kopfzeile als auch der Absatz sind genau dort, wo wir sie brauchen.
Ungeordnete Listenstile
Es gibt eine Menge Dinge, die wir tun müssen, um diese Listen richtigzustellen. Lass uns die Dinge ein wenig ändern und zuerst den Code betrachten, dann gehe ich durch den Code.
Wie Sie sehen, zielt der erste Block auf die ungeordnete Liste als ganze Einheit. Hier habe ich einige grundlegende Größen- und Schriftstile festgelegt und den Aufzählungspunkt durch das Festlegen des Listenart-Typs auf "none" entfernt.
Als nächstes habe ich die Links gezielt ausgewählt. Ich habe sie verschoben, die Unterstriche entfernt, die Farbe festgelegt und den gleichen Display-Trick ausgeführt, den wir zuvor gesehen haben, um den anklickbaren Bereich zu vergrößern.
Zum Abschluss habe ich einige benutzerdefinierte Stile auf die Listenelemente selbst angewendet. Die untere Umrandung erstellt eine Trennung zwischen jedem Element und der Hover-Stil ändert den Hintergrund. Hier ist das Ergebnis unserer Arbeit, unsere Speisekarte ist fast fertig!
Zusammenbruch und animieren
Bis zu diesem Punkt haben wir unser Menü geöffnet gehalten, damit wir es sehen können, während wir die Elemente darin gestalten. Nun, da wir wissen, dass alle unsere visuellen Stile genau so sind, wie wir sie wollen, ist es Zeit, jeden Abschnitt zu reduzieren und dann so einzustellen, dass er beim Schweben geöffnet wird.
Standardmäßig setzen Browser die Höhe dieser ungeordneten Listen auf automatisch, was bedeutet, dass sie gerade groß genug sind, um den gesamten Inhalt darin zu speichern. Um die Menüabschnitte so auszublenden, dass nur die Balken angezeigt werden, können wir diese ungeordneten Listen anvisieren und die Höhe auf 0 setzen. Beachten Sie, dass wir den Absatz allein lassen. Dadurch wird sichergestellt, dass unser oberer Abschnitt immer geöffnet ist.
Jetzt ist unser Menü viel kürzer und nimmt nicht so viel Platz ein. Schließlich können Sie auch den Nutzen der zuvor umgesetzten Steigungen und Grenzen erkennen.
Den Übergang animieren
Als Nächstes wollen wir diese Menüs wieder mit dem Hover öffnen, aber bevor wir das tun, müssen wir eine Animation einrichten, damit der Übergang schön und schrittweise erfolgt. Stellen Sie sicher, dass Sie die verschiedenen Browsererweiterungen einfügen und die Eigenschaft height festlegen.
Beim Hover erweitern
Alles, was Sie jetzt noch tun müssen, ist, es so zu gestalten, dass sich die ul beim Schweben vergrößert. Das ist schwierig, aber seien Sie vorsichtig. Ihr Instinkt kann sein, etwas zu tun wie: ul: hover? aber das wollen wir nicht. Stattdessen möchten wir es so gestalten, dass Sie irgendwo in diesem Menüelement schweben können, entweder in der Leiste oder in der ungeordneten Liste. Das Element, das wir erweitern möchten, ist jedoch nur die ul. So sieht unser Selector aus:
Manchmal ist es hilfreich, einen Wähler rückwärts zu lesen, wenn er herausfinden will, was er tut. Dies weist unseren Browser an, eine Höhe von 93px für unsere ungeordneten Listen festzulegen, wenn ein .menu-Element darüber bewegt wird.
Zu beachten ist hierbei, dass wir die Höhe nicht einfach auf auto setzen können, da dies aus irgendeinem Grund die Animation deaktiviert. Wenn Sie die Animation nicht wünschen, ist die Höhe von auto viel flexibler und ermöglicht es Ihnen, die Anzahl der Untermenüelemente zu variieren. Wenn Sie dies mit der Animation tun möchten, müssen Sie die Höhe für jede individuell anpassen.
Sehen Sie es in Aktion
Unser Menü ist jetzt komplett. Achten Sie darauf, die Reifen in der Demo zu treten, um zu sehen, wie alles funktioniert. Ich füge auch einen Link zu dem vervollständigten Code hinzu, damit Sie sich alles zusammen ansehen können.
Demo: Demo starten
Siehe den Code: Schauen Sie sich HTML und CSS auf Tinkerbin an
Fazit
Ich hoffe, Ihnen hat dieser Rundgang beim Erstellen eines animierten vertikalen Navigationsmenüs gefallen. In der Implementierung ist es den animierten Download-Schaltflächen, die wir neulich erstellt haben, sehr ähnlich. Sie sollten sich also wirklich damit auskennen, Inhalte mit reinem CSS zu verstecken und anzuzeigen.
Suchen Sie nach einer noch besseren Version dieses Menüs, um auf unserer brandneuen Schwesterseite Design Curate zu erscheinen. Dort findest du eine Menge toller Freebies, die du heute herunterladen und in deine Projekte implementieren kannst.