Navigation

☰

• Navigation
  • Dropdown-Menü
  • Flyout-Menü

Eine Navigation ermöglicht das Navigieren (lat. für (An-)Steuern) zwischen mehreren Webseiten oder Kapiteln einer Webseite. Beispiele finden sich in Menüs, Inhaltsverzeichnissen und Linklisten.

In diesem Kurs werden Navigation-Menüs für einzelne Webseiten eines Webauftritts vorgestellt.

1. Konzepte
   • Navigationstechniken
2. HTML-Grundstruktur
   • nav, ul, li + a
   • aktuelle Seite kennzeichnen
   •  :hover und :focus
   • oben oder unten?
     
     
3. Dropdown-Menü
   • ul und ul ul
   • CSS am Limit
   • zugängliche Variante mit JavaScript
4. Flyout-Menü
   • Skip-Links
   • Flyout-Menü
   • Toggle-Design
   • Variante mit details

• Konzepte

Dieses Tutorial wurde ursprünglich unter CSS/Anwendung und Praxis/… einsortiert und erklärte, wie man (ausgeblendete) Untermenüs eines Dropdown-Menüs mit :hover wieder sichtbar macht. In den Folgejahren wurden ARIA-Attribute, die z.B die aktuelle Seite markieren, immer wichtiger, sodass ein eigenes Kapitel zu HTML entstand.

Mittlerweile wurde immer klarer, dass inklusive Menüs nur noch mit JavaScript realisiert werden können. Keine Angst, dies sind nur wenige Zeilen Code, die funktionierendes HTML als progressive enhancement schrittweise verbessern!

Die Beispiele aus Kapitel 3 und 4 sind für kleinere Projekte gedacht, in einem nächsten Schritt könnte man mit PHP die Navigation auslagern und z. B. die aktuelle Seite automatisch erkennen und kennzeichnen.

--Matthias Scharwies (Diskussion) 19:22, 19. Feb. 2023 (CET)

Siehe auch

• HTML/Tutorials/Links
  - alles über Hyperlinks!
• Brotkrumen-Navigation
  - ein bread crumb-Menü
• HTML/Tutorials/Listen/Hybride Nummerierung
  - Umfangreiche Webseiten bestehen aus vielen Abschnitten - ein dynamisch erstelltes Inhaltsverzeichnis erleichtert die interne Seitennavigation.
• Internationalisierung
  - Warum ein Sprachauswahl-Menu keine Länderflaggen haben sollte, wird hier erklärt!
• JavaScript/Tutorials/Kontextmenü
  - Ein Kontextmenü erlaubt den Einsatz einer individuell gestalteten Toolbar auf Ihrer Webseite
• PHP/Tutorials/Templates
  - Auslagern der Navigation

Blog

• Navigation - alles inklusive