Beispiel:CSS-flyout1.html
Aus SELFHTML-Wiki
<!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;
}
.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;
}
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>
<h1>
<a href="#"><img src="https://src.selfhtml.org/designs/design01/css/icons/triangle.svg" alt="Logo"></a>
Triangular Tours
</h1>
<nav>
<ul>
<li><a aria-current="page">Home</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main id="content">
<h2>Flyout-Menü mit toggle-Button (noch ohne Funktion!)</h2>
<p>Um Platz für Inhalte zu schaffen, soll die Navigation nur bei Bedarf eingeblendet werden. Deshalb erweitern wir unsere Navigation um einen toggle-Button.</p>
<ol>
<li><strong>Nur HTML</strong>: 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.</li>
<li><strong>HTML + CSS</strong>: Das Gleiche wie vorher, aber mit einem besseren Aussehen und Gefühl.</li>
<li><strong>HTML, CSS + JavaScript</strong>: Das JavaScript erzeugt den Button und blendet die Navigation aus.<br>Wir können auf den Button klicken und die Anzeige des Menüs ein- und ausschalten.</li>
</ol>
<p>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>.</p>
</main>
</body>
</html>
