<!DOCTYPE html> <html lang="de">

 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Flyout-Menü 1</title> <script> document.addEventListener('DOMContentLoaded', function () {

flyoutExtension();

function flyoutExtension () { const menu = document.querySelector('nav ul'); menu.insertAdjacentHTML('beforebegin', ` <button id="toggle" aria-expanded="false" aria-controls="menu"> Menu auf- und zuklappen </button>`); menu.classList.add('menu');

const toggle = document.querySelector('#toggle'); toggle.addEventListener('click', function() { const currentState = toggle.getAttribute('aria-expanded'); const newState = currentState === 'true' ? 'false' : 'true'; toggle.setAttribute('aria-expanded', newState); });

}

}); </script> <style> a {

 color: var(--blue4);

}

a:hover, a:focus { color: var(--accent1-color); }

.visually-hidden, [visually-hidden="true"] { position: absolute !important; clip-path: rect(1px, 1px, 1px, 1px) !important; padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; }

h1 {

 color: var(--accent1-color);

}

h1 a img {

 width: 1.2em;

aspect-ratio: 1; }

root {

--background-color: #113; --accent1-color: gold; --accent2-color: darkred; --text-color: black; --blue: #337599; --blue4: #adc8d6; }

body {

background: var(--background-color);
font-family: 'Arial', sans-serif;
padding: 1em;
max-width: 40em;
color: white;

} </style> </head> <body> <header> <a id="skip-link" class="visually-hidden" href="#content">zum Inhalt</a>

Triangular Tours

 <nav>

<a aria-current="page">Home</a>
<a href="#">Seite 2</a>
<a href="#">Seite 3</a>
<a href="#">Seite 4</a>
<a href="#">Kontakt</a>

 </nav>

</header>

Flyout-Menü mit toggle-Button (noch ohne Funktion!)

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 <a href="https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#Kopiervorlage_f.C3.BCr_Ungeduldige">Kopiervorlage</a>.

</main> </body> </html>