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 3: Den Menübutton im HTML einfügen

Schritt 3: Den Menübutton im HTML einfügen

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

Gratismonat starten Für Ihr Team erwerben

Schritt 3: Den Menübutton im HTML einfügen

“

Die JavaScript Prüfung ist eingebaut, die mobile Navigation ist gestaltet, und es geht jetzt weiter mit dem Einfügen des Menübuttons im HTML. Dazu wechsle ich in den Editor und habe hier die Startseite bereits geöffnet. Das sind die Dateien aus dem Anfangsordner zu diesem Film, das blende ich mal aus, und zunächst einmal müssen wir eine gute Stelle suchen für den Menübutton, und das ist innerhalb der Navigation und oberhalb der Navigationsliste. Das Element zum Einfügen eines Buttons heißt Button, und das soll beschriftet werden mit dem Wort Menü. Die Grafik wird später im CSS eingebunden, die 3 waagerechten Striche. Dann soll es eine Klasse bekommen, die heißt menubutton. Und jetzt kommt der entscheidende Knackpunkt. Der Schnipsel JavaScript, der bewirkt, dass beim Anklicken des Buttons die Menüleiste gezeigt wird. Das ist natürlich indirekt, denn hier wird nur eine Klasse hinzugefügt. this, also dieses Element classList, da ist er schon, .toggle, und jetzt soll eine Klasse ein- und…

Inhalt