Logo Triangular Tours

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.

  1. 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.
  2. HTML + CSS: Das Gleiche wie vorher, aber mit einem besseren Aussehen und Gefühl.
  3. 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.