Flyout-Menü mit toggle-Button
Um Platz für Inhalte zu schaffen, soll die Navigation nur bei Bedarf eingeblendet werden. Deshalb erweitern wir unsere Navigation um einen toggle-Button.
- Nur HTML: In diesem Fall wird der Benutzer nur die Navigationsliste sehen und bedienen können. Jetzt ist unsere JavaScript-gesteuerte Schaltfläche nutzlos und tut nichts.
- HTML + CSS: Das Gleiche wie vorher, aber mit einem besseren Aussehen und Gefühl.
- HTML, CSS + JavaScript: Das JavaScript erzeugt den Button und blendet die Navigation aus.
Wir können auf den Button klicken und die Anzeige des Menüs ein- und ausschalten.
Für ganz Ungeduldige gibt es eine Kopiervorlage.