Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Schritt 5: Die Navigation per CSS ausblenden

Schritt 5: Die Navigation per CSS ausblenden

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Schritt 5: Die Navigation per CSS ausblenden

“

Der Menübutton ist gestaltet und dann folgt jetzt im nächsten und fünften Schritt das Ausblenden der Navigationsliste per CSS. Dazu wechsle ich in den Editor, hier sind die Dateien aus dem Anfangsordner zu diesem Film. Und navi-responsiv ist bereits geöffnet, "Menübutton per CSS ausblenden" steht bereits als Kommentar. Los geht es mit der Klasse .js, also nur wenn JavaScript aktiv ist, site-nav ul, also die Navigationsliste. Und die soll jetzt ausgeblendet werden, und zwar auf eine etwas ungewöhnliche Art und Weise, nämlich mit der Eigenschaft max-height, und die wird auf 0 gesetzt. Also, eine Höhe von 0, und Sie sehen rechts in der live Vorschau, das funktioniert schon ganz gut, nur das ließ der Inhalt über. Deswegen muss hier overflow auf hidden gesetzt werden, nicht zum Umschließen von flow, sondern wirklich, um überfließende Inhalte zu verstecken. Warum max-height: 0 und warum nicht einfach display: none, oder visually hidden oder sonst irgendwas? Nun die Antwort ist, die…

Inhalt