Navigation

Aus SELFHTML-Wiki
(Weitergeleitet von HTML/Tutorials/Navigation)
Wechseln zu: Navigation, Suche

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


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

Blog

  • Navigation - alles inklusive