Drop-Down-Navigation mit nur CSS, CSS Snippets

Wenn Sie möchten, zusammen mit dem Video folgen:

Abschrift

In diesem Video werde ich zum Erstellen eines Drop-Down-Navigationsmenüs mit CSS nur reden.

Ich fange mit Code, den ich in meinem einfachen horizontalen Navigation Tutorial vorgestellt. Sie könnten das Video zuerst ansehen möchten, wenn Sie den gesamten Code nicht verstehen, mit denen ich zu starten.

Wenn Sie folgen möchten entlang Sie den Code aus meiner GitHub-Repository namens greifen können „Dropdown“. Ich werde einen Link.

Ich verwende den Brackets Code-Editor, damit ich die Live-Vorschau sehen, wie ich arbeite. Sie können sehen, dass dies eine einfache Navigation, die verschiedenen Farben auf dem aktiven Element hat und auch, wenn Sie schweben.

Als ich diese Navigation erstellt habe ich einen Handy-First-Ansatz, und ich begann mit einem einfachen Menü vertikalen Navigation, die auf größeren Bildschirmen zur Horizontalen verändert.

HTML Änderungen

So fügen Sie Untermenüs, müssen Sie einfach eine verschachtelte unsortierte Liste in der oberen Menüpunkt hinzuzufügen.

Also, wenn ich ein Untermenü unter Tutorials will, kann ich zu, dass Li-Tag gehe und nach innen von ihm, legen Sie eine anderen ul-Tag und ein paar li-Tags für jeden Menüpunkt mit einem innen Link. Die Syntax ist wie das Top-Level-Menü, gerade innerhalb verschachtelt. Ich füge 3 Menüpunkte mit einigen Emmet Verknüpfungen.

Ich werde auch ein Untermenü für Newsletter erstellen.

Jetzt sieht das schrecklich sowohl auf den kleinen Bildschirm und größeren Bildschirm.

Ich werde zunächst auf dem kleinen Bildschirm arbeiten.

CSS Änderungen für den kleinen Bildschirm

Der Grund dafür ist nicht lesbar ist, weil die Untermenüs werden auf dem Hauptmenü-Rendering. Das ist, weil es eine Eigenschaft height unter .nav li ist. Die Listenelemente mit Untermenüs werden nur 40px gegeben, die nicht ausreicht, um die Untermenüs zu enthalten.

Wenn ich es entfernen, wird die Höhe auf Standardeinstellung Auto statt, die der Browser bedeutet, dass die Höhe auf der Grundlage ihrer Inhalte erforderlich berechnen. Jetzt können wir alle Menüpunkte sehen.

Das neue Problem ist, dass die Schriftgröße für das Untermenü ist größer als das obere Menü.

Das ist, weil ich die Schriftgröße mit der em-Einheit angegeben. Ems basieren auf der Schriftgröße des Eltern berechnet. Und wenn Sie Elemente verschachtelt sind, kann, dass ein mehrfach Effekt verursachen. In diesem Fall werden die Untermenüs immer eine Schriftgröße, die 1,2-mal so groß wie das Hauptmenü ist.

So ems verwendet, kann frustrierend sein, wenn man die Dinge nisten, die eine Schriftgröße angeben.

Es gibt eine andere Maßeinheit genannt REMS die für „root ems“ steht und wird immer seinen Wert auf dem Wurzelelement Base anstelle des Mutter. Das bedeutet, dass Sie die Kaskade und den Multiplikatoreffekt zu vermeiden.

Ich werde die Maßeinheit rem ändern.

Nun sind alle Elemente die gleiche Größe haben.

Allerdings rem funktioniert nicht in IE8 und unten so, wenn Sie unterstützen müssen, dass Sie eine andere Lösung brauchen. Sie könnten px stattdessen verwenden.

Ich mag eigentlich die Untermenü kleinen Text sein, um sie zu helfen von den Top-Menüs zu unterscheiden. Also werde ich einen neuen Wähler für den Untermenü li-Tags erstellen und dann kann ich eine andere Schriftgröße angeben.

Wenn ich den li angeben, die innerhalb eines anderen li ist, wird es die verschachtelten Listen Elemente nur Ziel.

Als ich es 1em eingestellt haben, können Sie sehen, dass die Größe konsistent ist.

Aber ich werde setzen diese so .8em dass es ein wenig kleiner ist.

Ich mag es nicht, den Text mit diesem längeren Menü zentriert. Dies kommt von diesem text-align: center hier auf der ungeordneten Liste. Ich möchte dies auf dem ul-Tag verlassen, weil ich dieses Menü auf großen Bildschirmen zentrierte wollen, aber ich werde die li-Tags macht Ausrichtung verlassen haben.

Also werde ich text-align hinzufügen: links li .nav.

Dann brauche ich etwas Padding hinzufügen, damit es nicht die linke nicht umarmen. Wenn ich das zu dem Listenelement hinzufügen, wird die Grenze vermasseln wird, so werde ich diese Zeile auf die Anker-Tags bewegen.

Das letzte Problem auf dem kleinen Bildschirm-Menü ist, dass die Grenze ist, zeigt sich nicht zwischen allen Linien.

Ich habe die Grenze an der Unterseite der Listenelemente, aber da der Boden des Tutorials oder Artikels Newsletter-Liste unter dem Untermenü ist, wird der Hauptmenüpunkt nicht über die Grenze bekommen.

Stattdessen werde ich diese Code-Zeile nach unten bewegen, um die auch einen Tag.

Nun ist die kleine Speisekarte sieht besser aus.

CSS-Down-Down-Navigation auf größeren Bildschirmen

So endlich kann ich das Hauptthema dieses Tutorial angehen, und das ist, wie die machen Untermenü zeigen nur auf schweben auf größeren Bildschirmen. Das wird eigentlich nicht viel Zeit in Anspruch nehmen.

Dieser nächste Teil des Codes geschieht innerhalb der Medienabfrage. Ich bin mit einem Grenzwert von 650px, weil das ist, wie viel Platz das Menü horizontal in einer Zeile angezeigt werden muss, basierend auf der Breite der Menüpunkte. Sie können ems verwenden oder was auch immer Breakpoint macht Sinn für Ihr Design.

Dieser Code innerhalb der Medienabfrage wird nur auf Bildschirmen passieren, die 650 Pixel oder mehr haben.

Das erste, was ich tun werde, ist die Positionierung des Untermenü auf absolutes gesetzt, so dass das Untermenü aus dem Fluss des Dokuments genommen und nimmt nicht auf der Höhe mehr auf der Hauptnavigationsleiste.

Ich zielte auf die ul-Tags innerhalb von li so dass dies nur für die verschachtelten Menüs gilt.

Jetzt möchte ich diese Untermenüs verstecken. Ich kann die Eigenschaft display auf none gesetzt, um das Untermenü nicht angezeigt.

Es ist ein wenig schwer zu sehen, aber die untere Grenze von der Hauptnavigationsleiste späht, so möchte ich, dass auf größeren Bildschirmen auszuschalten.

Sie können den Unterschied sehen, wenn ich diese Zeile ein- und ausschalten.

Als nächstes wollen wir das Menü angezeigt wird, wenn wir auf dem übergeordneten Menü schweben. So können wir schweben auf dem übergeordneten li Ziel und dann die ungeordnete Liste.

Das Untermenü angezeigt wird auf schweben, aber es ist ein horizontales Menü. Das könnte sein, was Sie wollen. Wenn ja, könnten Sie ihn stoppen und Stil, so dass es angebracht ist, wo Sie wollen und sieht besser aus.

Aber ich will eine vertikale Navigation.

Der Grund ist es horizontal ist, weil ich bin mit Anzeige: inline-block auf allen li-Tags innerhalb von .nav. Das war die Hauptnavigation horizontal zu machen.

Wenn ich diese Subnavigation vertikal sein will, muss ich die Unter li-Tags zielen und sie als Block angezeigt werden;

Die Breite des Untermenüs ist ein wenig zu kurz. Das liegt daran, li eine Breite von 130px hat, aber die Hintergrundfarbe von dem ul-Tag kommt, das nicht eine Breite Satz hat und daher standardmäßig auto.

Ich mag die Untermenü ul-Tags die gleiche Breite wie die Mutter li haben. Wenn ich Breite sagen: erben sie die Breite des übergeordneten erben, oder das Listenelement.

Jetzt up schön alles Linien.

Ich mag es nicht, dass der Text jetzt linksbündig. Denken Sie daran, dass ich für den kleinen Bildschirm fixiert.

Wenn ich diesen Code in den Medien Abfrage hinzufügen

Es sieht immer noch nicht, wie die Einzelteile wegen der links Polsterung ausgerichtet zentriert sind ich für das kleine Bildschirm-Menü hinzugefügt. Ich werde diese kurz ignorieren und das in einem Moment beheben.

Nun sind alle Menüpunkte werden auf die Mitte ausgerichtet sind, einschließlich der entsprechenden Untermenü. Es ist nicht sehr auffällig, wenn all mein Text die gleiche Breite, aber wenn ich eine Zeile zu ändern, können Sie sie sehen.

Ich möchte nur das Hauptmenü zu zentrieren. Es ist einfach, die Kindermenüs zum Ziel von mehr Selektoren Zugabe, aber ich kann das nicht auf dem oberen Menü. Ich könnte eine Klasse hinzufügen, oder ich kann die direkten Nachkommen der nav Klasse Ziel durch das Kind Selektor, der das ist>.

Sehen Sie, wie wenn ich das Kind Selektor hinzufügen, werden nur die Top-Navigation zentriert ist. Nun, zentriert und 15px padding auf der linken Seite.

Ich kann das Kind Selektor wieder, dass die Polsterung zu entfernen.

Als ich dieses Kind Wähler bin mit wird es nicht die Untermenü Anker-Tags ausrichten, weil sie nicht direkt Abkömmlinge unter der .nav div sind.

Die padding-left von 15px auf den untergeordneten Menüs bleiben.

Das Hauptkonzept ist das verborgene Menü, das auf schweben anzeigt. Und das Teil des Codes ist hier richtig. Wir verstecken das verschachtelte Menü im Normalzustand, und wir zeigen sie auf schweben. Wenn Sie es vertikal angezeigt werden soll, möchten Sie Anzeige einstellen auf die Menüpunkte zu blockieren.

Das Wichtigste in diesem Code zu bemerken ist der Wähler. Ich Auswahl ul-Tags innerhalb von li-Tags. Das heißt, es wird nur die verschachtelte Untermenüs Targeting. Es wird ein wenig verwirrend auf den verschiedenen li und ul-Tags suchen, so stellen Sie sicher, dass Sie das verstehen. Sie könnten Klassen zu den Untermenüs hinzufügen, um die Dinge klarer zu machen, wenn Sie wollen.

Browser-Unterstützung

Dies wird in allen Browsern außer IE8 arbeiten. Das ist, weil IE8 keine Medien-Anfragen erkennen. Deshalb müssen wir alle den Code aus der Medien-Abfrage in der IE8 und unter Stylesheet setzen.

Wenn Sie mit einem Pre-Prozessor sind, können Sie die Aufrechterhaltung doppelten Code vermeiden, indem Sie den Code in einer separaten Datei setzen, und es sowohl in dem Haupt-Stylesheet und der IE-Stylesheet zu importieren.

Was kommt als nächstes

Es gibt mehr Dinge zu, dies zu tun, um es besser zu machen. Wie ich der kleine Bildschirm sollte nicht oben auf der Seite angezeigt werden erwähnt, wie ist. An einem Telefon würde es dauern wahrscheinlich den gesamten Bildschirm. einige Indikatoren auch, dass es versteckte Menüs hier nützlich sein würde, damit der Benutzer weiß, können sie schweben mehr zu sehen. Einiger Übergang auf den Dropdown-Menü Menüs wäre auch schön.

Ich plane, diese Konzepte in Zukunft Tutorials zur Bekämpfung der in Kürze.

Vielen Dank für Beobachtung, lassen Sie es mich wissen, wenn Sie Fragen haben.

47 Gedanken zu „Drop-Down-Navigation mit CSS nur“

Ich liebe diese und Ihre anderen Tutorial über eine einfache CSS Navigationsleiste, habe ich gelernt, im Allgemeinen viel über CSS von ihnen zuzuschauen. Ich habe zwei Fragen, die ich hoffe, dass Sie nicht mit zu helfen nichts dagegen.

Mit freundlichen Grüßen - David

Vielen Dank. Es ist meine Absicht, bessere mobile Unterstützung für diese Navigation in einem späteren Tutorial zu decken, aber ich habe keine Zeit, dass noch zu bewältigen hatte, und es wird nicht in naher Zukunft geschieht. Ehrlich gesagt, Drop-Down-Menüs werden immer in diesen Tagen in Ungnade wegen dieser Frage. Hover-Effekte sind nicht groß auf mobile Geräte zu verwenden. Es tut mir leid ich keine einfache Antwort haben jetzt Sie auf dieses Recht. Es gibt andere, die dieses Thema bereits in Angriff genommen haben, hoffentlich finden Sie, was Sie suchen.

Dann können Sie einen Selektor tun:

Mit diesem Code, wenn der Benutzer auf der „News“ Seite ist, nur das Navigationselement, das eine Klasse von Nachrichten hat, wird die „aktive“ Styling. Und das gleiche gilt für die anderen Seiten. Sie können mit Ihrem Selektor spezifischer sein und body.new li.news sagen, wenn man will, aber es ist normalerweise nicht notwendig.

Der erste Gedanke, den Kopf getreten war „auf Klick“ zu verwenden, anstatt „auf schweben“ die Dropdown-Menüs zu zeigen, aber obwohl die für Touch funktionieren könnte (ich würde den Top-Level-Menüpunkt ändern muß), es würde nicht das Gefühl, Recht für Maus. Ist es möglich, „entweder auf“ Zustand ein CSS zu haben? das heißt fällt das Menü auf unten entweder schweben oder klicken Sie auf (touch).

Mit freundlichen Grüßen - David