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

Beispiel:Flyout-popover.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ü 1</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: 15em; /* 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: 2em 0 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);
    }

    .close-btn {
      font-size: 1.25em;
      background-color: var(--accent2-color);
      color: white;
      cursor: pointer;
      position: absolute;
      right: .2em;
      font-size: 1.1em;
      padding: 0.25em 0.4em;
      text-align: center;
      top: 0.2em;
    }

    :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>
</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">☰</span>
      <span class="visually-hidden">Navigation</span>
    </button>
    
    <nav id="main-nav" popover>
      
      <button popovertarget="main-nav" popovertargetaction="hide" class="close-btn">
        <span aria-hidden="true">X</span>
        <span class="visually-hidden">Schließen</span>
      </button>
      
      <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>
    <ol>
      <li><strong>Nur HTML</strong>: Der Button ist direkt mit der Navigation verbunden (popovertarget). Ein Klick öffnet und schließt das Menü – ganz ohne JavaScript.</li>
      <li><strong>HTML + CSS</strong>: Wie zuvor, aber mit verbessertem Layout und Animationen.hl.</li>
      <li>So entsteht ein zugängliches, interaktives Menü ganz <b>ohne JavaScript</b>.</li>
    </ol>
  </main>
</body>

</html>

Abgerufen am 24.04.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Flyout-popover.html"