Beispiel:CSS-flyout3.html
<!DOCTYPE html> <html lang="de">
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flyout-Menü 3</title> <script> document.addEventListener('DOMContentLoaded', function () {
flyoutExtension();
function flyoutExtension () { const menu = document.querySelector('nav ul'); // Initially hide the menu to prevent links from being accessible
menu.style.display = 'none';
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); const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
menu.style.display = isExpanded ? 'block' : 'none';
});
}
const cssRules = ` .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; } .visually-hidden:focus, [visually-hidden="true"]:focus {
position: static !important; clip-path: none !important; padding: 0.5em; border: medium solid blue; z-index: 1000; width: auto; height: auto;
}
[aria-expanded] {
width:2em;
height: 2em;
background: transparent;
color: transparent;
border: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1,2 h7 M1,5 h7 M1,8 h7' fill='none' stroke='gold' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
} [aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M2,2 l6,6 M8,2 l-6,6' fill='none' stroke='%23c82f04' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[aria-expanded=false] ~ ul { font-size: 0; height:0; transition: all 1s; }
[aria-expanded=true] ~ ul { font-size: 1em; height: 100%; transition: all 1s; }
- root {
--background-color: #113; --accent1-color: gold; --accent2-color: darkred; --text-color: black; --blue: #337599; --blue4: #adc8d6; }`;
const stylesheet = document.createElement('style');
stylesheet.textContent = cssRules;
document.querySelector('html > head').appendChild(stylesheet);
});
</script>
<style>
a {
color: var(--blue4);
}
a:hover, a:focus { color: var(--accent1-color); }
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>
<a href="#"><img src="https://src.selfhtml.org/designs/design01/css/icons/triangle.svg" alt="Logo"></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>
<main id="content">
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 <a href="https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#Kopiervorlage_f.C3.BCr_Ungeduldige">Kopiervorlage</a>.
<a href="https://forum.selfhtml.org/advent/2024">Zurück zum
Adventskalender 2024.
</main> </body> </html>
