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 6: Die Navigation mit dem Menübutton einblenden

Schritt 6: Die Navigation mit dem Menübutton einblenden

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

Gratismonat starten Für Ihr Team erwerben

Schritt 6: Die Navigation mit dem Menübutton einblenden

“

Die Navigationsliste wurde per CSS ausgeblendet und jetzt geht es im nächsten und entscheidenden Schritt darum, die Navigationsliste mit dem Menübutton wieder einblenden zu können. Nach diesem Schritt wird die Navigation das erste Mal richtig funktionieren, und dazu gehe ich rüber in den Editor. Und Sie sehen hier navi-responsiv.css ist schon geöffnet. Hier liegen die Dateien aus dem Anfangsordner zu diesem Film, und im Ordner Bilder gibt es eine zweite svg-Datei mit dem schönen Namen menuclose.svg. Los geht es aber mit dem Einblenden des Menübuttons. Die Klasse js ist nur existent, wenn JavaScript im Browser aktiviert ist. Die Klasse showmenu wird durch einen Klick auf den Button dynamisch eingefügt. Jetzt kommt +ul. Das heißt also, dieser Selektor wählt ein Element auf der gleichen Ebene aus. Ich wechsle mal eben ins HTML. Sie sehen hier, showmenu existiert hier im class-Attribut, wenn der Button angeklickt wird. Und auf derselben dom-Ebene hier sieht man das ul. Also "showmenu +…

Inhalt