Aufbau von Mega -Menüs mit Flexbox

Kernpunkte

• Flexbox ist ein CSS -Layoutmodell, mit dem Entwickler komplexe Benutzeroberflächen erstellen können, ohne sich auf redundante CSS und JavaScript -Tricks zu verlassen. Es verwendet ein lineares Layoutmodell, sodass es einfacher ist, den Inhalt horizontal oder vertikal ohne Abstandsberechnungen zu layern.
• Flexbox kann verwendet werden, um Websites mit riesigen Navigationsmenüs zu erstellen. Dieses Layoutmodell ermöglicht das Erstellen einfacher Navigationsleisten, einzelner Dropdown-Menüsegmente und die Beschränkung der einzelnen Dropdown-Menüsegmente auf drei Spalten. Das Flex -Layout reagiert auf Elemente im Container und verringert die Notwendigkeit von Medienabfragen.
• Das endgültige Mega -Menü, das in diesem Tutorial erstellt wurde, reagiert nicht vollständig. Die Hauptmenüleiste wird auf einem kleineren Bildschirm angezeigt, aber das riesige Menü ist nicht verfügbar, nur die Links auf oberster Ebene sind verfügbar. Dieses Tutorial ist jedoch eine gute Demonstration der Kraft und Einfachheit von Flexbox.
• Riesenmenü Navigation ist sehr nützlich, um alle Optionen anzuzeigen und kann auf E-Commerce-Websites effektiv verwendet werden. Es ist jedoch wichtig, die Verwendbarkeit solcher Merkmale zu berücksichtigen und ihre Vor- und Nachteile vor der Umsetzung zu verstehen.

Wie Sie wissen, hat Flexbox in letzter Zeit viel Aufmerksamkeit auf sich gezogen, als der Browserunterstützung zugenommen hat. Es ermöglicht Entwicklern, komplexe Benutzeroberflächen zu erstellen, ohne sich auf redundante CSS und JavaScript -Tricks zu verlassen.

Flexbox verwendet ein lineares Layoutmodell, sodass wir den Inhalt horizontal oder vertikal ohne Abstandsberechnungen layout lagerten. Das Flex -Layout reagiert auf Elemente im Container und verringert die Notwendigkeit von Medienabfragen.

In diesem Artikel werde ich dieses Layoutmodell verwenden, um ein riesiges Navigationsmenü zu erstellen, und dabei sehen Sie, wie einfach es ist, UI -Komponenten mit Flexbox zu erstellen und zu erweitern.

Ich werde die einzelnen Flexbox -Eigenschaften hier nicht detailliert diskutieren, sondern mich auf die praktische Anwendung dieser Funktionen konzentrieren. Eine grundlegende Einführung in Flexbox finden Sie in den folgenden Ressourcen:

• Guy Routledge's Flexbox Tutorial
• Flexbox Anfänger freundliche Einführung
• Flexbox Complete Guide

Was werden wir bauen?

Um herauszufinden, was ich Ihnen zum Erstellen zeigen werde, lesen Sie den Vollbildmodus mit CodePen.

Dieses Tutorial ist in drei Teile unterteilt:

1. Erstellen einer Navigationsleiste: Verwenden Sie Flexbox, um eine einfache Navigationsleiste für unsere fiktive E-Commerce-Plattform zu erstellen
2. Erstellen Sie ein einzelnes Dropdown-Menüsegment
3. Begrenzen Sie ein einzelnes Dropdown-Menüsegment auf drei Spalten

Navigationsleiste bauen

Die Markierung der Navigationsleiste ist einfach. Zu Demonstrationszwecken werde ich zwei Klassen (Navigationsleiste und Menü) verwenden, um alles zu verarbeiten. CSS hier schließen alle Stile aus, die nicht mit diesem Tutorial zusammenhängen.

<code class="language-html"><nav class="navbar">
  <ul class="menu">
    <li>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i>
</li>
    </ul>
</nav></code>

Die

navigbar -Klasse ist für die Zentrierung unserer Navigationsleiste im verfügbaren Bereich verantwortlich. Ich werde mich jedoch auf die Menüklasse konzentrieren, in der ich Flexbox verwenden werde.

Ich möchte, dass meine Navigationsgegenstände horizontal angeordnet werden. Außerdem möchte ich, dass jeder Gegenstand gleichermaßen verteilt ist und die Bedarf eingrenzt, wenn nicht genügend Platz vorliegt.

Zunächst muss ich einen Flex -Formatierungskontext für das .menu -Element erstellen, das ich zum Implementieren verwenden werde. Jetzt werden alle direkten Kinder des .menu -Elements (d. H. Flex -Container) zu Flexprojekten. display: flex

Als nächstes möchte ich, dass die Menüelemente gleich breit sind. Ich habe

hinzugefügt, damit sie gleichmäßig mit gleichen Breiten wachsen lassen. Hier ist der Code: flex: 1

<code class="language-html"><nav class="navbar">
  <ul class="menu">
    <li>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i>
</li>
    </ul>
</nav></code>

Sehen Sie sich den Code an, Sie fragen sich vielleicht, warum ich alle Flex -Projekte wiederverändere (.navbar .menu li).

display: flex In der Demo ändert sich die Hintergrundfarbe, wenn Sie über einen Menüelement schweben. Wenn ich die

-Mobilie des Flex -Projekts nicht auf

festlegt, hat nur das Li -Element die gleiche Breite, und der interne Inhalt ist nicht (d. H. Einige hervorgehobene Teile sind anklickbar, während andere nicht anklickbar sind ). display flex Um den Inhalt auf die gesamte Breite seines übergeordneten Elements auszudehnen, habe ich das Flex -Projekt auch in einen Flex -Behälter verwandelt. Mit dieser Einstellung kann ich jedes verschachtelte Element so breit wie sein übergeordnetes (mit

) machen, wodurch der gesamte hervorgehobene Bereich klickbar ist.

flex: 1 Alternativ kann ich dies auch erreichen, ohne das Li -Element in den Flex -Behälter zu setzen, aber ich muss drei zusätzliche Eigenschaften (

,

, display: inline-block) verwenden, und ich bevorzuge es, diese Situation zu vermeiden . width: 100% box-sizing: border-box Diese Demo zeigt, was bisher getan wurde.

In nur fünf CSS -Flexbox -Eigenschaften ist die Navigationsleiste fertig. Wie Sie sehen können, ist dies eine ordentliche Lösung.

Im nächsten Abschnitt werde ich Ihnen einen Teil des Erstellens einer riesigen Navigation zeigen.

Erstellen Sie ein einzelnes Dropdown-Menüsegment

Folgendes ist das Markup, mit dem ein einzelnes Dropdown-Menüsegment erstellt wird, das auf mehrere Segmente erweitert wird. Das Container -Liste -Projekt wird kopiert, um zusätzliche Segmente zu erstellen.

Container ist ein Flex -Behälter, und jedes direkte untergeordnete Element (d. H. Container__List) ist ein Flex -Projekt. Jede Container -Liste verfügt über mehrere Navigationselemente, von denen jedes von Container __listItem verpackt wird. Ich habe den Inhalt in eine DIV gewickelt und ich werde später darauf zurückkehren.

<code class="language-css">.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}</code>

Folgendes ist CSS:

Beachten Sie, dass ich die Eigenschaft

<code class="language-html"><ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul></code>

auf Container __liste verwendet habe, aber ich habe sie nicht für die Navigationsleiste selbst verwendet. Wie bereits erwähnt, möchte ich nicht, dass die Navigationsleistenelemente einwickeln, wenn nicht genügend Platz vorliegt. Stattdessen schrumpfen sie gleichmäßig, wenn der verfügbare horizontale Raum abnimmt.

flex-wrap Für Container -Liste -Projekte sind die Anforderungen jedoch genau das Gegenteil. Ich möchte, dass meine Listenelemente 25% des Raums verwenden, so dass jede Zeile bis zu vier Elemente enthält, die ich mit

tun kann.

flex-wrap: wrap Ich habe auch

auf 0 gesetzt. Dies ist nützlich, da es gleichmäßig verteilte Elemente von weniger als vier verhindert. Indem ich es auf 0 setze, zwinge ich das Projekt, 25% des Raums zu halten.

Was ist mit dem Inhalt, der jetzt in einem Div eingewickelt ist? Ich möchte mit einer Situation umgehen, in der Sie möglicherweise überfließen möchten. Dies ist sehr einfach, wenn sich Ihr Inhalt direkt in einem Flex -Child -Element befindet (d. H. Container__ListItem). Ich kann den Schnitttext durch einen Ellipsis ("...") durch den folgenden Code ersetzen.

<code class="language-html"><nav class="navbar">
  <ul class="menu">
    <li>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i>
</li>
    </ul>
</nav></code>

In diesem Fall habe ich den Inhalt jedoch in ein Div eingerichtet, das von Container __listItem eingewickelt wird. Daher funktioniert die obige Lösung nicht. Artikel Flexbox und verkürzter Text bieten eine Lösung. Im folgenden Code ist die folgende Zeile in jedem Deklarationsblock "Update" -Kommentar die Zeile, die dieses Problem behandelt:

<code class="language-css">.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}</code>

Begrenzen Sie ein einzelnes Dropdown-Menüsegment auf drei Spalten

Zu diesem Zeitpunkt wurde der größte Teil der Arbeiten abgeschlossen. Für den Rest dieses Abschnitts füge ich einen weiteren Dropdown-Abschnitt hinzu, den ich auf drei Spaltenelemente einschränken werde.

Wie bereits erwähnt, werde ich Container __liste zweimal kopieren und für ein neues Dropdown-Menüsegment namens "Geräte" verwenden. Dies ist für Demonstrationszwecke. In einem praktischen Beispiel können Sie eine Liste über JavaScript oder in einer Backend -Sprache erstellen.

Ich werde eine Has-Multi-Klasse hinzufügen, um die Benutzeroberfläche anzupassen. Mit dieser Klasse muss ich einige Eigenschaften überschreiben.

<code class="language-html"><ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul></code>

Hier habe ich flex-basis auf 33,333%festgelegt, da ich möchte, dass drei Teile im Container angezeigt werden. Ich habe nur flex-basis geändert, aber die beiden anderen Eigenschaften flex-grow und flex-shrink wurden aus dem einzelnen Abschnittscode geerbt. Dies gibt mir Flexibilität, wenn die Container -Liste weniger als drei ist. Wenn es nur zwei Listen gibt, wächst das Container -Liste -Projekt und vergeben Platz zwischen ihnen. Das heißt, jeder Artikel belegt 50% der Gesamtbreite.

Beachten Sie, dass .Container__ListItem auf flex-basis: 100% gesetzt ist, was sicherstellt, dass nur eine Spalte in Container __liste ist. Ich kann 50% verwenden, um zwei Spalten pro Abschnitt zuzulassen.

Ein paar Hinweise zur Verwendbarkeit von Riesenmenüs

Ich habe das Mega -Menü als mein Beispiel ausgewählt, ohne die Benutzerfreundlichkeit zu sehr zu betrachten. Bevor ich solche Funktionen verwendete, habe ich einige Ressourcen zur Verfügung gestellt, um die Vor- und Nachteile zu besprechen.

Meiner Meinung nach ist die MEGA-Menünavigation sehr nützlich, um alle Optionen anzuzeigen, und dieser Navigationsstil kann effektiv für E-Commerce-Websites verwendet werden. Ich mag die Navigation von Intel.

Verfügbarkeitsvorteile und Nachteile der Mega -Menüs (Mega -Menü Teil 1)
Das riesige Menü ist perfekt für die Navigation der Website
• perfekt
Riese Dropdown-Menü

Schlussfolgerung

Man sollte beachtet werden, dass das endgültige Mega -Menü in diesem Tutorial nicht vollständig reagiert. Die Hauptmenüleiste wird auf einem kleineren Bildschirm angezeigt, aber das riesige Menü ist nicht verfügbar, nur die Links auf oberster Ebene sind verfügbar. Für die Zwecke dieses Tutorials sollte dies ausreichen. Fühlen Sie sich frei, die Demo zu kopieren und zu verbessern, wenn Sie es vorziehen.

Das riesige Dropdown-Menü Navigationssystem ist eine großartige Möglichkeit, die Leistung und Einfachheit von Flexbox zu demonstrieren, und ich hoffe, ich habe das in diesem Tutorial übermittelt. Wie Sie sehen können, wird Flexbox nicht nur zum Zentrieren von Inhalten verwendet.

Wenn Sie verschiedene Flexbox-basierte Technologien verwenden, um ein Mega-Menüsystem zu erstellen, können Sie uns in den Kommentaren wissen.

Update: Ich habe eine reaktionsschnelle mobilfreundliche Version dieser Mega-Menüs erstellt, die Sie in dieser Codepen-Demo finden können.

FAQ zum Erstellen von Mega -Menü mit Flexbox (FAQ)

Wie kann mein Mega -Menü mit Flexbox reagieren?

Es ist sehr einfach, das MEGA -Menü mit Flexbox zu reagieren. Sie können Medienabfragen verwenden, um das Layout des Menüs entsprechend der Bildschirmgröße anzupassen. Sie können beispielsweise Menüelemente vertikal auf einem kleineren Bildschirm stapeln und horizontal auf einem größeren Bildschirm anzeigen. Sie können auch die Flex-Wrap-Eigenschaft verwenden, damit Menüelemente bei Bedarf in mehrere Zeilen einwickelt werden können. Denken Sie daran, Ihr Menü auf verschiedenen Geräten zu testen, um sicherzustellen, dass es gut aussieht und in allen Bildschirmgrößen funktioniert.

Kann ich mit Flexbox Mega-Menüs mehrstufiger Mega-Menüs erstellen?

Ja, Sie können mit Flexbox Mega-Menüs mit mehreren Ebenen erstellen. Sie können Flexbehälter miteinander nisten, um eine Mehrebene-Navigation zu erstellen. Jede Ebene kann mit CSS und JavaScript angezeigt oder versteckt werden. Auf diese Weise können Sie komplexe Navigationsstrukturen erstellen, die immer noch leicht zu navigieren und zu verstehen sind.

Wie füge ich meinem Mega Flexbox -Menü Animationen hinzu?

Sie können CSS -Übergänge und -Transformationen verwenden, um dem Flexbox -Mega -Menü Animationen hinzuzufügen. Zum Beispiel können Sie Übergänge verwenden, um die Öffnung und Schließung des Untermenüs reibungslos zu beleben. Sie können auch die Transformation verwenden, um die Bewegung von Menüpunkten zu belasten. Denken Sie daran, die Animations -Subtilität und -konsistenz zu behalten, um den Benutzer nicht zu verwirren oder abzulenken.

Wie verbessert man die Zugänglichkeit der Flexbox -Mega -Menüs?

Die Verbesserung der Zugänglichkeit des Mega -Menüs Flexbox umfasst mehrere Schritte. Stellen Sie zunächst sicher, dass Ihr Menü über die Tastatur schiffbar ist. Dies bedeutet, dass der Benutzer in der Lage sein sollte, die Registerkartenschlüssel und die Pfeiltasten zu verwenden, um im Menü zu navigieren. Zweitens verwenden Sie Aria -Rollen und -attribute, um assistive Technologien zusätzliche Informationen über Menüs zu liefern. Drittens stellen Sie sicher, dass Ihr Menü genügend Kontrast hat und leicht zu lesen ist.

Kann ich mit Flexbox klebrige Mega -Menüs erstellen?

Ja, Sie können mit Flexbox klebrige Mega -Menüs erstellen. Sie können die CSS -Eigenschaft "Position: Sticky" verwenden, um das Menü einfügen, wenn der Benutzer scrolls. Dies stellt sicher, dass das Menü immer auf langen Seiten sichtbar und zugänglich ist.

Wie füge ich meinem Mega Flexbox -Menü Symbole hinzu?

Sie können Symbole zum Mega -Menü Flexbox mit Symbolschriften oder SVG hinzufügen. Sie können das Flex -Attribut verwenden, um die Größe und den Abstand der Symbole zu steuern. Sie können auch CSS verwenden, um die Farbe und den Schwebeffekt des Symbols zu ändern.

Wie füge ich meinem Mega Flexbox -Menü eine Suchleiste hinzu?

Sie können dem Mega -Menü Flexbox eine Suchleiste hinzufügen, indem Sie ein Flex -Element erstellen, das ein Formular mit Eingabefeldern und Schaltflächen einreicht. Sie können das Flex -Attribut verwenden, um die Größe und Position der Suchleiste zu steuern. Sie können auch CSS verwenden, um die Suchleiste so zu stylen, dass sie den Rest des Menüs entspricht.

Wie füge ich meinem Mega Flexbox -Menü ein Dropdown -Menü hinzu?

Sie können das Mega-Menü Flexbox Dropdown-Menüs hinzufügen, indem Sie verschachtelte Flex-Container erstellen. Sie können mit CSS die Dropdown-Menüs standardmäßig ausblenden und anweisen, wenn der Benutzer über das übergeordnete Menüelement schwebt. Sie können auch JavaScript verwenden, um dem Dropdown-Menü zusätzliche Interaktivität hinzuzufügen, z. B. das Schließen, wenn der Benutzer außerhalb des Dropdown-Menüs klickt.

Wie füge ich meinem Flexbox Mega -Menü ein mobiles Menü hinzu?

Sie können das Mega -Menü Flexbox ein mobiles Menü hinzufügen, indem Sie eine Schaltfläche erstellen, um das Menüanzeige zu umschalten. Sie können Medienabfragen verwenden, um den Umschalter auf dem größeren Bildschirm auszublenden und auf dem kleineren Bildschirm anzuzeigen. Sie können auch JavaScript verwenden, um die Eigenschaft "Anzeige" des Menüs zu umschalten, wenn die Schaltfläche klickt.

Wie optimieren Sie die Leistung der Flexbox -Mega -Menüs?

Optimierung der Leistung des MEGA -Menüs Flexbox umfasst mehrere Schritte. Stellen Sie zunächst sicher, dass Ihre CSS und JavaScript geschrumpft und komprimiert werden, um ihre Dateigröße zu reduzieren. Zweitens verwenden Sie CSS -Übergänge und -Transformationen zu Animation anstelle von JavaScript, da sie besser abschneiden. Drittens verwenden Sie Medienabfragen, um verschiedene Stile und Skripte entsprechend der Bildschirmgröße zu laden, wodurch die Menge des unnötigen Code -Ladens verringert wird.

Das obige ist der detaillierte Inhalt vonAufbau von Mega -Menüs mit Flexbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!