Foundation 6: Die neue Menükomponente

Foundation 6's optimiertes Menüsystem: Eine einzelne, anpassbare Komponente, die mehrere ältere Optionen ersetzt.

Schlüsselverbesserungen:

• Einheitliche Menükomponente: Foundation 6 Konsolidate Inline-Listen, Seitennavigation, Symbolbalken und Unterantrieb in eine einzelne, hochpassbare Menükomponente. Dies vereinfacht die Entwicklung und reduziert die Rahmengröße.
• Responsive Design: Menüs erstellen, die mithilfe einer einzelnen Codebasis dynamisch an verschiedenen Bildschirmgrößen und -geräten anpassen. Dies beseitigt die Notwendigkeit separater Menüs für Desktop und Mobile.
• JavaScript -Plugins: Verbesserung der Funktionalität mit Plugins wie Dropdown-, Drilldown- und Akkordeonmenüs, die alle über die Tastaturnavigation zugänglich sind.
• Leichtes Gerüst: Die Verschmelzung von Menüstrukturen hat zu einer signifikanten Verringerung der Rahmengröße (über 1000 Zeilen von CSS entfernt) geführt, was zu schnelleren Ladezeiten und einer einfacheren Wartung führt.
• Top -Balk -Verbesserungen: Die obere Balkenkomponente unterstützt jetzt linke und rechte Abschnitte für Menüs und enthält einen reaktionsschnellen Umschalter für kleinere Bildschirme.

Bauenmenüs in Foundation 6:

Die Kernmenüstruktur ist einfach: A <code><ul></ul> Element mit der Klasse menu, die <code><li> Elemente und <a></a> -Tags für Links enthält. Zusätzliche Klassen steuern das Aussehen und Verhalten des Menüs.

• Einfache Menüs: Verwenden Sie die .simple -Klasse, um das Standardstyling zu entfernen und einen vollständig benutzerdefinierten Look zu erstellen.

• Horizontale/vertikale Menüs: Die Standardeinstellung ist horizontal. Fügen Sie die .vertical Klasse für vertikale Ausrichtung hinzu.

• verschachtelte Menüs (Untermenüs): Verwenden Sie verschachtelte <code><ul></ul> Elemente mit der .nested -Klasse für Untermenüs in vertikalen Menüs. Für komplexere Wechselwirkungen verwenden Sie die Dropdown-, Drilldown- oder Akkordeon -Plugins.

• Symbolmenüs: Icons mit <i class="fi-..."></i> Elementen (mit der Icon -Schriftart der Foundation) oder Bild -Tags in den <a></a> -Tags einbeziehen. Die Symbole der .icon-top -Klasspositionen über dem Menütext.

• Dropdown-, Drilldown- und Akkordeon-Menüs: Diese javaScript-gesteuerten Plugins bieten dynamische, interaktive Menüs. Verwenden Sie die Attribute data-dropdown-menu, data-drilldown und data-accordion-menu, um diese Funktionen zu aktivieren. Die Ereignisbehandlung ermöglicht benutzerdefinierte Aktionen (z. B. up.zf.accordion für den Akkordeonverschluss).

• reaktionsschnelle Navigation: Verwenden Sie das Attribut data-responsive-menu, um verschiedene Menütypen für verschiedene Bildschirmgrößen zu definieren (z. B. small-dropdown, medium-drilldown).

• obere Balkleiste mit linken/rechten Abschnitten: Verwenden Sie die Klassen .top-bar-left und .top-bar-right im Container .top-bar, um Menüs mit Abschnitten auf beiden Seiten zu erstellen. Der ansprechende Umschalter (data-responsive-toggle) zeigt eine Menüschaltfläche auf kleineren Bildschirmen an.

Beispiel (einfaches horizontales Menü):

<code class="language-html"><ul class="menu">
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 1</a></li>
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 2</a></li>
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 3</a></li>
</ul></code>

Schlussfolgerung:

Das neu gestaltete Menüssystem von

Foundation 6 bietet eine erhebliche Verbesserung sowohl der Funktionalität als auch der Benutzerfreundlichkeit. Der einheitliche Ansatz vereinfacht die Entwicklung, reduziert die Codegröße und verbessert die Reaktionsfähigkeit und macht es zu einem leistungsstarken Werkzeug für den Aufbau moderner, flexibler Websites.

Das obige ist der detaillierte Inhalt vonFoundation 6: Die neue Menükomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!