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ü):

<ul class="menu">
  <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 1</a></li>
  <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 2</a></li>
  <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 3</a></li>
</ul>

Schlussfolgerung:

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!