Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Beispiel:Flyout-toggle.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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>

<a href="#"> <img src="https://src.selfhtml.org/designs/design01/css/icons/triangle.svg" alt="Logo"> </a> Triangular Tours

   <button popovertarget="main-nav" style="anchor-name: --main-nav-toggle;">

<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> 

     
     
   </button>
   
   <nav id="main-nav" popover>
  • <a href="" 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 Popover

Um Platz für Inhalte zu schaffen, soll die Navigation nur bei Bedarf eingeblendet werden. Deshalb erweitern wir unsere Navigation um einen Button.

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 ohne Einsatz von JavaScript erreicht. </ol> </main> </body> </html>

Abgerufen am 23.04.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Flyout-toggle.html"