Advertisement
  1. Web Design
  2. Navigation Design

Wie man mit Flexbox ein benutzerdefiniertes Mega-Menü erstellt

by
Read Time:12 minsLanguages:

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

Wenn Sie Ihr eigenes Mega-Menü mit zahlreichen Elementen, Bildern und Listen erstellen möchten, ist flexbox das richtige Werkzeug für Sie. Damit können Sie ein inhaltsbewusstes, mehrspaltiges und mehrstufiges Mega-Menü erstellen, das beim Hover herunterfällt - ohne JavaScript- oder CSS-Optimierungen.

In diesem Tutorial zeige ich Ihnen, wie Sie mit dem Flexbox-Layoutmodul das folgende Dropdown-Mega-Menü erstellen:

Megamenu with flexboxMegamenu with flexboxMegamenu with flexbox

Dies ist kein einfaches Layout, daher erstellen wir es mit den folgenden Schritten:

  1. Zuerst markieren und gestalten wir die Hauptmenüleiste.
  2. Anschließend erstellen wir eine Flexbox-Vorlage für das Mega-Menü mit den Abschnitten, die Sie auf dem Screenshot oben sehen können: Urlaubstypen, Urlaubspakete, Unsere Services, Last-Minute-Angebote und Trendziele.
  3. Wir fügen den Inhalt (Bilder, <ul> Listen, Symbole) in die Vorlage ein.
  4. Als nächstes richten wir die Elemente in jedem Abschnitt aus.
  5. Wir entfernen die Hilfsstile der Vorlage (Hintergrundfarben und Rahmen) aus dem CSS.
  6. Wir fügen die Hover-Regel hinzu, die das Mega-Menü anzeigt, wenn der Benutzer mit der Maus über das Urlaubs-Menü fährt.

Wenn Sie unser Flexbox-Mega-Menü testen möchten, bevor Sie beginnen, sehen Sie sich die folgende Demo an:

Ein Mega-Menü für WordPress entwickeln?

UberMenu (WordPress Mega Menu Plugin) ist eines der meistverkauften Elemente auf CodeCanyon und erledigt absolut alles für Sie, wenn Sie ein Mega-Menü für WordPress erstellen. Schauen Sie sich das an (und kehren Sie dann natürlich zum Tutorial zurück!)

UberMenu - WordPress Mega Menu PlugUberMenu - WordPress Mega Menu PlugUberMenu - WordPress Mega Menu Plug
UberMenu - WordPress Mega Menu Plug

1. Erstellen Sie die Hauptmenüleiste

Die Hauptmenüleiste besteht aus fünf Elementen: Startseite, Urlaubstage, Info, Blog und Kontakt. Das Dropdown-Mega-Menü gehört zu Holidays, während die anderen Menüpunkte nur für sich alleine stehen. Hier ist der HTML-Code, der die Hauptmenüleiste markiert (aber noch nicht das Mega-Menü):

Im CSS definieren wir nun die grundlegenden Stile und Farben. Wir verwandeln das Menüelement auch in einen Flex-Container, damit die .menu elemente in einer geraden Reihe angeordnet werden können. Durch Hinzufügen des center zur Eigenschaft align-items zentrieren wir jedes Element auch vertikal innerhalb des Flex-Containers:

Wir setzen auch den flex: 1; Regeln Sie die Menüelemente so, dass sie sich über die gesamte Breite des Flex-Containers erstrecken und den Platz gleichmäßig aufteilen. Wenn Sie mehr über die Funktionsweise der flex-Kurzschrift erfahren möchten, lesen Sie meinen Artikel über die Eigenschaften der Flexbox-Dimensionierung:

Unten sehen Sie, wie die Hauptmenüleiste jetzt aussieht:

Main menu bar stylingMain menu bar stylingMain menu bar styling

2. Erstellen Sie eine Vorlage für das Mega-Menü

Um das Layout des Mega-Menüs richtig zu gestalten, erstellen wir zuerst eine Vorlage und füllen sie dann mit Inhalten. Da unser Mega-Menü aus mehreren Ebenen ungeordneter Listen besteht, ist es viel einfacher, zunächst die Hauptabschnitte zu erstellen. So ändert sich unser HTML:

Wie Sie sehen können, besteht das .submenu aus zwei Teilen: .submenu-top für die vier listenbasierten Abschnitte (Urlaubstypen, Urlaubspakete, Unsere Dienste, Last-Minute-Angebote) und .submenu-bottom für die bildbasierten Trendziele. Es handelt sich um zwei separate Flex-Container, sodass wir jeweils unterschiedliche Regeln für die Dimensionierung und Ausrichtung von Flexboxen anwenden können.

Unten sehen Sie das Layout, das wir mit Flexbox erreichen möchten. Ich habe der Vorlage Farben und Rahmen hinzugefügt, damit Sie sehen können, wie sich die verschiedenen Flex-Elemente zueinander verhalten (die Vorlage verwendet den obigen HTML-Code):

Flexbox megamenu starter templateFlexbox megamenu starter templateFlexbox megamenu starter template

Die erste Zeile ist das Hauptmenü; Wir haben dies bereits in Schritt 1 erstellt und gestaltet. Die zweite Zeile ist .submenu-top, ein flexibler Container, mit dem die Elemente je nach Inhalt so viel Platz beanspruchen können, wie sie benötigen (Inhaltsbewusstsein). Die dritte Reihe ist der .submenu-bottom, bei dem es sich um einen flexiblen Behälter handelt, der den Raum gleichmäßig zwischen den Elementen aufteilt.

Darüber hinaus positionieren wir das .submenu relativ zum .menu, indem wir die Eigenschaften position, top und left verwenden. Da .menu 60px hoch ist, bewegen wir .submenu 60px relativ zu seiner Position nach unten. Das folgende CSS enthält auch die oben genannten Stile, die zu .menu und .menu-item gehören, fügt jedoch die position: relative; hinzu auch zum .menu.

Wir zeigen die beiden Untermenüs (.submenu-top und .submenu-bottom) als spaltenbasiertes Flex-Layout an, indem wir die Regel flex-direction: column zu .submenu hinzufügen. Gleichzeitig sind sowohl .submenu-top als auch .submenu-bottom auch zeilenbasierte Flex-Layouts für ihre eigenen untergeordneten Elemente. Wir fügen keine flex-direction: row; hinzu. Da dies der Standardwert für die flex-direction ist, setzen wir einfach die display-Eigenschaften von .submenu-top und .submenu-bottom auf flex.

Da wir .submenu-top inhaltsbewusst machen möchten, müssen wir zulassen, dass sich flex-Elemente so stark dehnen, wie sie benötigt werden. Daher definieren wir die flex-Eigenschaft hier nicht (sie verwendet ihre Standardeinstellungen). Wir möchten jedoch, dass die Elemente richtig nebeneinander ausgerichtet sind, und fügen daher den justify-content: space-around; hinzu zu .submenu-top. Auf diese Weise wird der positive Raum gleichmäßig zwischen den flexiblen Elementen verteilt.

Das Layout von .submenu-bottom ist identisch mit dem Layout des Hauptmenüs (.menu). Also verwenden wir den flex: 1; Regel auf die Elemente, damit sie die gesamte Breite des Flex-Containers gleichmäßig untereinander teilen.

In der folgenden Demo können Sie sehen, wie die verschiedenen Abschnitte unseres Mega-Menüs im Vergleich zueinander angeordnet sind:

3. Fügen Sie Inhalte in die Vorlage ein

In diesem Schritt werden wir nichts anderes tun, als den endgültigen Inhalt in unsere Mega-Menüvorlage einzufügen. In .submenu-top erhält jedes Flex-Element eine eigene ungeordnete Liste, während .submenu-bottom nur eine ungeordnete Liste für die vier Trendziele ist:

Im obigen HTML habe ich Font Awesome-Symbole verwendet und Bilder aus Lorem Picsum gezogen. Wenn Sie sich den Screenshot unten ansehen, werden Sie sofort verstehen, warum wir mit der Erstellung der Vorlage begonnen haben:

Flexbox megamenu template first populationFlexbox megamenu template first populationFlexbox megamenu template first population

Die Elemente sind bereits in dem gewünschten Layout ausgerichtet. Jetzt müssen wir nur noch kleinere Ausrichtungsarbeiten durchführen und dann die Hilfsfarben und Ränder der Vorlage entfernen (es sei denn, Sie stehen auf die gesamte brutalistische Ästhetik?!).

4. Richten Sie die Elemente in jedem Abschnitt aus

In diesem Schritt wird der HTML-Code nicht berührt, sondern nur die kleineren Probleme des Layouts mithilfe von CSS behoben. Das erste, was ich sehe, wenn ich mir das Bild oben ansehe, ist, dass der Abschnitt Urlaubspakete im .submenu-top im Vergleich zu den anderen Elementen zu breit ist. Dies könnte schlimmer werden, wenn wir noch längere Beschreibungen haben. Es ist also sinnvoll, den Flex-Elementen in .submenu-top einen max-width Breite hinzuzufügen, zum Beispiel:

Durch die Steuerung der Breite der Flex-Elemente sieht unser Mega-Menü viel besser aus:

Flexbox megamenu template with maximized itemsFlexbox megamenu template with maximized itemsFlexbox megamenu template with maximized items

Nehmen Sie nun ein paar kleine Anpassungen am CSS vor. Wir verwandeln jedes Listenelement der ersten und zweiten Spalte in einen separaten Flex-Container. Dies bedeutet vier winzige Flex-Container im Abschnitt Urlaubstypen und drei winzige Flex-Container in Urlaubspaketen.

Wir verwenden diese Lösung, um die Elemente zu zwingen, sich auf folgende Weise anständig neben oder untereinander auszurichten:

  • Im Abschnitt Feiertagstypen verwenden wir align-items: center; um den Text genau in der mittleren Zeile des Miniaturbilds anzuzeigen,
  • Im Abschnitt Urlaubspakete verwenden wir die flex-direction: column; um jede Beschreibung unterhalb der zugehörigen Definition anzuzeigen (Familien, Schüler, Paare).

In den anderen Abschnitten wird die Flexbox nicht für die Inline-Ausrichtung verwendet, da dies mit grundlegenden CSS-Regeln möglich ist, nämlich margin und width:

So sieht unser ausgerichtetes Mega-Menü im Moment aus:

Flexbox megamenu template with aligned contentFlexbox megamenu template with aligned contentFlexbox megamenu template with aligned content

5. Entfernen Sie die Vorlagenhelfer

Jetzt stimmt alles richtig! Wir müssen jetzt die Hilfsfarben und -ränder der Vorlage entfernen und die endgültigen Farben zu den Links und Überschriften hinzufügen. Unten finden Sie das endgültige CSS ohne die Hover-Regel:

Der HTML-Code ist immer noch derselbe wie in Schritt 3. Wir haben jedoch auch ein Abwärtspfeilsymbol von Font Awesome zum Menüpunkt Urlaubstage hinzugefügt, um das Vorhandensein des Mega-Menüs anzuzeigen (wir formatieren es mithilfe des .menu-icon-Handles im obigen CSS).

Unten sehen Sie, dass alles wie erwartet aussieht:

6. Fügen Sie die Hover-Regel hinzu

Damit das Mega-Menü beim Hover herunterfällt, müssen wir es ausblenden und erst dann anzeigen, wenn .menu-item seinen Hover-Status erhält:

Jetzt ist unser Flexbox-Mega-Menü in Betrieb. In der folgenden Demo können Sie es testen und auch den entsprechenden HTML- und CSS-Code überprüfen:

Abschluss

Obwohl das Erstellen eines Mega-Menüs eine komplizierte Aufgabe ist, ist es mit Flexbox perfekt möglich, insbesondere wenn Sie zuerst eine Vorlage erstellen, mit der Sie das Layout richtig gestalten können.

Sie könnten sich fragen, ob es nicht einfacher / besser ist, ein Mega-Menü mit CSS-Raster anstelle von Flexbox zu erstellen, und ich sage "es kommt darauf an". Obwohl Sie mit dem CSS-Raster zweidimensionale Layouts erstellen können, verfügt Flexbox über eine sofort einsatzbereite Inhaltserkennung, die in diesem Szenario ideal ist.

Wenn Sie jede Zeile des Mega-Menüs in einen Flex-Container verwandeln, können Sie jeweils unterschiedliche Ausrichtungs-, Umbruch- und Größenregeln anwenden. Diesem Konstruktionsprinzip folgen auch Flexbox-basierte Frameworks wie Bootstrap 4. Außerdem bietet Flexbox immer noch eine bessere Unterstützung als das CSS-Grid (derzeit 98,3% aller weltweit verwendeten Browser im Vergleich zu 92,03% des CSS-Grids, dies wird sich jedoch in Zukunft ändern).

Sie können Ihr Mega-Menü auch mithilfe von Medienabfragen zusammen mit dem Flexbox-Layout ansprechend gestalten. Wenn Sie wissen möchten, wie Sie dies tun können, lesen Sie mein vorheriges Tutorial zum Erstellen einer responsiven Navigationsleiste mit Flexbox.

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.