JS/03_js-dom/uebungen/o01_navigation-mit-hamburger-icon

Optionale Übungsaufgabe 1: Responsive Navigation mit Hamburger-Menü

1. HTML-Struktur & Icon-Vorbereitung

Erweitere die bestehende Navigationsstruktur im Projet webseite-gulp um das notwendige Markup für einen Menü-Toggle.

1. Hamburger-Icon-Markup einfügen: Füge innerhalb Deines <nav>-Elements das HTML für den Menü-Toggle ein.
   • Du kannst hierfür die animierten Icons von jonsuh.com/hamburgers/ verwenden.
2. Zustandsklasse definieren: Überlege Dir eine Kontrollklasse (z.B. nav-open oder is-active), die Du später per JavaScript auf das <body>-Tag oder das <nav>-Element setzt, um den geöffneten Zustand zu signalisieren.

2. CSS-Styling & Media Query (Mobile First)

Stelle sicher, dass die Navigation standardmäßig für die mobile Ansicht funktioniert, und passe sie dann für größere Bildschirme an.

1. Mobile Standard (bis 575\text{px}):

   • Die Hauptmenüpunkte müssen standardmäßig versteckt sein (display: none; oder per transform aus dem Sichtfeld geschoben).
   • Das Hamburger-Icon muss in dieser Ansicht sichtbar sein.
   • Definiere die Darstellung des geöffneten Menüs (mithilfe Deiner Zustandsklasse, z.B. .nav-open .menu-list). Gestalte es als nutzerfreundliches Fullscreen-Overlay oder Sidebar für mobile Geräte.

2. Desktop-Übergang (ab 576\text{px}):

   • Füge die notwendige Media Query hinzu:

     @media (min-width: 576px) {
       /* ... hier die Desktop-Regeln ... */
     }
     

   • Innerhalb dieser Media Query:
     • Mache die Hauptmenüpunkte dauerhaft sichtbar und ordne sie im Desktop-Layout an.
     • Blende das Hamburger-Icon aus (display: none;).

---

3. JavaScript-Interaktivität (Menü-Toggle)

Implementiere die Logik, die das Umschalten des Menüzustands steuert, wenn das Icon geklickt wird.

1. Event-Listener: Füge dem Hamburger-Icon einen click-Event-Listener hinzu.

2. Klasse togglen: Im Click-Handler togglet Du die Zustandsklasse (nav-open oder is-active) auf dem Element (z.B. dem <body> oder <nav>), das Du im CSS zur Steuerung verwendest. Ein Klick öffnet das Menü, der erneute Klick schließt es. Vergesse dabei nicht dem Menü Icon die passende Klasse zum hinzufügen des Effekts zu vergeben.