Beispiel:CSS-flyout3.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ü 3</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">
<span class="visually-hidden">Menu auf- und zuklappen</span>
</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 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;
}
[aria-expanded] {
width:2em;
height: 2em;
background: transparent;
color: transparent;
outline: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>
<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</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>
