Beispiel:Flyout-toggle.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ü 2</title>
<style>
[popover] {
height: 0;
width: 15em;
overflow-y: clip;
transition:
height 0.25s allow-discrete,
display 0.25s allow-discrete;
inset: auto;
interpolate-size: allow-keywords;
position-anchor: --main-nav-toggle; /* for Chrome, problems with auto */
top: anchor(bottom);
left: anchor(left);
}
[popover]:popover-open {
height: 13em; /* Fallback */
height: calc-size(auto, size);
transition:
height 0.4s allow-discrete,
display 0.4s allow-discrete;
}
/* Entry: starting state before the popover animates in */
@starting-style {
[popover]:popover-open {
height: 0;
}
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
border: thin dotted;
}
nav li {
list-style: none;
margin: 0.5em;
padding: 0;
}
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
border: thin solid var(--background-color);
border-radius: .5em;
color: var(--accent1-color);
background-color: var(--background-color);
transition: all .25s ease-in;
}
[aria-current=page] {
background: var(--accent3-color);
}
nav a:focus,
nav a:hover,
nav a:active {
color: var(--background-color);
background-color: var(--accent1-color);
}
button {
font-size: 1.25em;
border: none;
border-radius: .4em;
width: 1.7em;
min-height: 1.6em;
font-weight: bold;
padding: 0;
background-color: var(--accent1-color);
}
button[popovertarget="main-nav"] {
.line {
transform-box: fill-box;
fill: none;
stroke: steelblue;
stroke-miterlimit: 8;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
transition: all 0.25s ease;
transform-origin: center;
}
}
button[popovertarget="main-nav"]:has(~ nav:popover-open) {
.top { transform: translateY(20px) rotate(45deg); }
.bottom { transform: translateY(-20px) rotate(-45deg); }
.middle { opacity: 0; }
}
:root {
--background-color: #113;
--accent1-color: gold;
--accent2-color: darkred;
--accent3-color: steelblue;
--text-color: black;
}
/* Grundlayout für SELFHTML-Beispiele */
.hinweis {
border-inline-start: thick solid var(--red);
padding-inline-start: 1em;
}
kbd {
background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
border: thin solid #aaa;
border-radius: 2px;
box-shadow: 1px 2px 2px #ddd;
font-family: inherit;
font-size: 0.9em;
padding: 0 0.5em;
}
.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;
}
body {
background: var(--background-color);
font-family: sans-serif;
padding: 1em;
max-width: 40em;
color: white;
}
</style>
<script>
const btn = document.querySelector('button[popovertarget]');
const nav = document.getElementById('main-nav');
const label = btn.querySelector('.visually-hidden');
const icon = btn.querySelector('#toggle');
btn.addEventListener('click', () => {
const isOpen = nav.matches(':popover-open');
if (isOpen) {
nav.hidePopover();
btn.setAttribute('aria-expanded', 'false');
label.textContent = 'Navigation ausklappen';
icon.classList.remove('open'); // adjust to your CSS
} else {
nav.showPopover();
btn.setAttribute('aria-expanded', 'true');
label.textContent = 'Navigation einklappen';
icon.classList.add('open');
}
});
</script>
</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>
<button popovertarget="main-nav" style="anchor-name: --main-nav-toggle;">
<span aria-hidden="true">
<svg viewBox="0 0 100 100" class="icon">
<line class="line top" x1="20" y1="30" x2="80" y2="30" />
<line class="line middle" x1="20" y1="50" x2="80" y2="50" />
<line class="line bottom" x1="20" y1="70" x2="80" y2="70" />
</svg>
</span>
<span class="visually-hidden">Navigation</span>
</button>
<nav id="main-nav" popover>
<ul>
<li><a href="" 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 <b>Popover</b></h2>
<p>Um Platz für Inhalte zu schaffen, soll die Navigation nur bei Bedarf eingeblendet werden. Deshalb erweitern wir unsere Navigation um einen Button.</p>
<P>Dieser Button triggert ein <a href="https://wiki.selfhtml.org/wiki/Infobox/Tooltips_mit_Popover">Popover</a>, das dann auf- und wieder zugeklappt wird. Dies wird mit nativem HTML <b>ohne</b> Einsatz von JavaScript erreicht.
</ol>
</main>
</body>
</html>
