Advertisement
  1. Code
  2. Web Development

Wie man ein Kick-Butt-CSS3-Mega-Dropdown-Menü erstellt

by
Read Time:21 minsLanguages:
This post is part of a series called CSS3 Mastery.
Build Awesome Practical CSS3 Buttons

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Mega-Menüs, die häufig im E-Commerce oder auf großen Websites verwendet werden, werden immer beliebter, da sie eine effektive Lösung für die Anzeige vieler Inhalte bei gleichzeitig sauberem Layout bieten. In diesem Tutorial erfahren Sie, wie Sie mit netten CSS3-Funktionen ein browserübergreifendes, fantastisches Dropdown-Mega-Menü nur für CSS erstellen.

Schritt 1: Erstellen der Navigationsleiste

Beginnen wir mit einem Grundmenü, das aus einer ungeordneten Liste und einigen grundlegenden CSS-Stilen besteht.

Menücontainer erstellen

Wir werden jetzt einige grundlegende CSS-Stile anwenden. Für den Menücontainer definieren wir eine feste Breite, die wir zentrieren, indem wir den linken und rechten Rand auf "auto" setzen.

Nun wollen wir sehen, wie wir es mit einigen CSS3-Funktionen verbessern können. Wir müssen unterschiedliche Syntaxen für Webkit-basierte Browser (wie Safari) und für Mozilla-basierte Browser (wie Firefox) verwenden. Wir müssen unterschiedliche Syntaxen für Webkit-basierte Browser (wie Safari) und für Mozilla-basierte Browser (wie Firefox) verwenden.

Für abgerundete Ecken lautet die Syntax:

Für den Hintergrund verwenden wir Farbverläufe und eine Fallback-Farbe für ältere Browser. Um die Konsistenz bei der Auswahl der Farben zu gewährleisten, gibt es ein fantastisches Tool namens Facade, mit dem Sie hellere und dunklere Töne einer Grundfarbe finden können.

In der ersten Zeile wird eine einfache Hintergrundfarbe angewendet (für ältere Browser). Die zweite und dritte Zeile erzeugen einen Farbverlauf von oben nach unten in zwei Farben: #0272a7 und #013953.

Wir können jetzt einen dunkleren Rand hinzufügen und das Design mit einem "fake" Rand polieren, der mit der Funktion "box-shadow" erstellt wurde. Die Syntax ist für alle kompatiblen Browser gleich: Der erste Wert ist der horizontale Versatz, der zweite der vertikale Versatz, der dritte der Unschärferadius (ein kleiner Wert macht ihn schärfer; in unserem Beispiel beträgt er 1 Pixel). Wir setzen alle Offsets auf 0, damit der Unschärfewert einen einheitlichen Lichtrand erzeugt:

Hier ist der endgültige CSS-Code für den #menu container:

Styling-Menüpunkte

Wir beginnen mit allen nach links ausgerichteten Menüelementen und platzieren sie mit einem margin-right (das Auffüllen ist für den Schwebezustand erforderlich):

Für den Schwebezustand und das Dropdown habe ich ein graues Farbschema für den Hintergrund gewählt.

Die Fallback-Farbe ist hellgrau (#F4F4F4) und der Farbverlauf wird von oben (#F4F4F4) nach unten (#EEEEEE) angewendet. Abgerundete Ecken werden nur auf die oberen Ecken angewendet, da das Dropdown-Menü direkt unter den Menüelementen angezeigt wird.

Die linke und rechte Polsterung ist hier etwas kleiner, da beim Schweben ein Rand von 1 Pixel angezeigt wird. Wenn wir den gleichen Abstand beibehalten, werden die Menüelemente um zwei Pixel nach rechts verschoben, da beim Bewegen des Mauszeigers der linke und der rechte Rand hinzugefügt werden. Um dies zu vermeiden, entfernen wir 1 Pixel Polsterung auf beiden Seiten, sodass wir 9 statt 10 Pixel haben.

Dann fügen wir oben nur abgerundete Ecken hinzu, damit das Dropdown-Menü perfekt unter dem übergeordneten Menüpunkt bleibt:

Hier ist das endgültige CSS für die Menüpunkte beim Hover:

Für die Links wenden wir einen schönen Textschatten mit einer einfachen Syntax an: Der erste und der zweite Wert sind horizontale und vertikale Offsets für den Schatten (in unserem Beispiel 1 Pixel), der dritte ist die Unschärfe (auch 1 Pixel) und dann haben wir die (schwarze) Farbe:

Hier ist das endgültige CSS für die Links:

Beim Bewegen der Maus verwenden wir, da der Hintergrund grau ist, eine dunklere Farbe (#161616) für die Links und die weiße Farbe für den Textschatten:

Schließlich benötigen wir eine Möglichkeit, um anzuzeigen, ob ein Dropdown-Menü vorhanden ist oder nicht, indem wir ein einfaches Pfeilbild als Hintergrund verwenden. Es wird mithilfe der Polsterung rechts positioniert und der obere Rand wird richtig darauf ausgerichtet. Beim Hover wird dieser obere Rand auf 7 statt 8 Pixel gesetzt, da beim Hover mit der Maus ein zusätzlicher Rand angezeigt wird (andernfalls würde der Pfeil beim Hover um 1 Pixel nach unten gedrückt):

Hier ist unser endgültiger Code für den Menücontainer und die Links. Nur das Element "Home" enthält derzeit keinen Dropdown-Inhalt:

Und das Ergebnis ist:

Building a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down Menu

Schritt 2: Codieren des Dropdowns

Ein "klassisches" Dropdown-Menü enthält normalerweise Listen, die in übergeordneten Listenelementen verschachtelt sind, und sieht folgendermaßen aus:

Allgemeine Struktur

Für unser Mega-Menü verwenden wir anstelle von verschachtelten Listen einfach Standard-DIVs, die wie jede verschachtelte Liste funktionieren:

Dies ist die Grundstruktur für das Dropdown. Die Idee ist, alle Arten von Inhalten wie Absätze, Bilder, benutzerdefinierte Listen oder ein Kontaktformular, die in Spalten organisiert sind, einschließen zu können.

Dropdown-Container

Container mit unterschiedlichen Größen enthalten den gesamten Dropdown-Inhalt. Ich habe die Tag-Namen entsprechend der Anzahl der Spalten ausgewählt, die sie enthalten sollen.

Um die Dropdowns auszublenden, verwenden wir die absolute Positionierung mit einem negativen linken Rand:

Die Hintergrund-Fallback-Farbe entspricht der für die Menüelemente verwendeten. Moderne Browser zeigen einen Verlauf an, der oben mit #EEEEEE beginnt (passend zum Verlauf des übergeordneten Menüelements) und unten mit #BBBBBB endet:

Wir werden wieder abgerundete Ecken verwenden, mit Ausnahme der oberen linken:

Um das zu veranschaulichen, wollen wir sehen, wie es aussehen würde, wenn wir nicht auf Details geachtet hätten:

Building a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down Menu

Hier ist unser Beispiel:

Building a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down Menu

Wie Sie sehen können, bleibt das Dropdown-Menü gut beim übergeordneten Menüpunkt.

Um einen perfekten Dropdown-Container zu haben, müssen wir die Breite für jeden angeben: 

Und um die Dropdowns beim Mauszeiger anzuzeigen, verwenden wir einfach:

Verwenden der Dropdown-Container

Unsere Kurse sind bereit, in unser Menü aufgenommen zu werden. Wir werden jeden von ihnen verwenden, beginnend mit dem 5-Spalten-Layout bis zum Dropdown-Menü für eine einzelne Spalte:

Hier ist eine Vorschau des obigen Codes:

Building a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down Menu

Schritt 3: Erstellen der Dropdown-Containerspalten

Nachdem wir die Container bereit haben, erstellen wir Spalten mit zunehmender Größe nach den Prinzipien des 960-Rastersystems.

Spalten verwenden

Hier ist ein Beispiel für ein Dropdown-Menü mit mehreren Spalten. In diesem Beispiel haben wir verschiedene Kombinationen mit allen Arten von Spalten:

Code-Vorschau:

Building a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down Menu

Schritt 4: Nach rechts ausrichten

Nun wollen wir sehen, wie wir unser Menü und den Dropdown-Inhalt am rechten Rand der Navigationsleiste ausrichten können. Nicht nur der Menüpunkt, sondern auch der Dropdown-Container sollte geändert werden.

Um dies zu erreichen, fügen wir dem übergeordneten Listenelement eine neue Klasse mit dem Namen .menu_right hinzu. Daher setzen wir den rechten Rand zurück und verschieben ihn nach rechts:

Als nächstes sehen wir uns das Dropdown an. Im vorherigen CSS-Code wurden abgerundete Ecken auf alle Ecken mit Ausnahme der linken oberen Ecke angewendet, um dem Hintergrund des übergeordneten Menüelements zu entsprechen. Jetzt möchten wir, dass dieses Dropdown-Menü am rechten Rand des übergeordneten Menüelements bleibt. Also überschreiben wir die Randradiuswerte mit einer neuen Klasse namens .align_right und setzen die obere rechte Ecke auf 0.

Zu guter Letzt möchten wir, dass das Dropdown-Menü rechts angezeigt wird. Also werden wir unsere neue Klasse verwenden und den linken Wert zurücksetzen und ihn dann rechts halten:

Jetzt kann es im Menü verwendet werden:

Und eine kleine Vorschau des obigen Codes:

Building a CSS3 Mega Drop Down Menu

Schritt 5: Hinzufügen und Gestalten von Inhalten

Nachdem wir die gesamte Struktur fertig haben, können wir so viel Inhalt hinzufügen, wie wir möchten: Text, Listen, Bilder usw.

Allgemeine Stylings

Beginnen wir mit einigen grundlegenden Stilen für Absätze und Überschriften:

Wir können den Links in der Dropdown-Liste eine schöne blaue Farbe zuweisen:

Listet Stylings auf

Lassen Sie uns unsere Listen überarbeiten. Wir müssen einige Stile wie die Hintergrundfarbe oder die Ränder, die in der Navigationsleiste verwendet werden, zurücksetzen:

Styling von Bildern

Und um einen Absatz mit einem Bild links zu erstellen:

Textfelder

Um einige Inhalte hervorzuheben, ist hier ein Beispiel für eine dunkle Box mit abgerundeten Ecken und einem subtilen Schatten:

Restylings-Listen

Und zum Abschluss gibt es noch eine andere Möglichkeit, Ihre Listen mit etwas CSS3 zu gestalten:

Schritt 6: Umgang mit Browserkompatibilität und IE6

Alle Browser verarbeiten Hover auf Nicht-Anker-Tags...  außer Internet Explorer 6; Daher funktioniert unser Mega-Menü immer noch nicht mit diesem alten Browser. Wir können dieses Problem dank einer Verhaltensdatei beheben, die diese Funktionalität hinzufügt. Sie finden es hier und verwenden bedingte Kommentare, um nur auf IE6 abzuzielen. Weitere Erklärungen finden Sie in diesem Artikel von CSS-Tricks.

Um auf IE6 abzuzielen, verwenden wir den folgenden Code:

Ich habe in diesem Tutorial einige PNG-Dateien verwendet, und wie jeder weiß, unterstützt IE6 keine Transparenz, sodass wir verschiedene Lösungen haben:

  • Konvertieren Sie sie in das GIF- oder PNG-8-Format
  • Verwenden Sie ein Skript
  • Stellen Sie beispielsweise mit TweakPNG eine andere Hintergrundfarbe als das Standardgrau ein

Ich lasse Sie die auswählen, die Ihren Anforderungen entspricht. Lassen Sie uns nun ein voll funktionsfähiges Beispiel überprüfen.

Letztes Beispiel

HTML-Teil

CSS-Teil

Interessante und relevante Links

Abschluss

Ich hoffe, Ihnen hat dieses Tutorial zum Erstellen von Mega-Menüs gefallen. Danke, dass Sie mitgehen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.