42 lines
2.3 KiB
Markdown
42 lines
2.3 KiB
Markdown
## Optionale Übungsaufgabe 1: Responsive Navigation mit Hamburger-Menü
|
|
|
|
### 1. HTML-Struktur & Icon-Vorbereitung
|
|
|
|
Erweitere die bestehende Navigationsstruktur im Projet `webseite-frontend` 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/](https://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:
|
|
```css
|
|
@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.
|