Beispiel:CSS Menüs7.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">

<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>Menü 7 </title> <script> </script> <style> nav > ul { 

 list-style:none;

// Safari hack, see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); 

 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 position:relative;

}

nav li { 

 margin: 0.5em 0 0.5em 0.5em;
 padding: 0;
 font-size: 1.5rem;  
 flex: 1 1 0%;

}

@media (min-width: 45em) { 

 nav > ul {	
   flex-direction: row;

height: 3em; 

 }
 nav li {
   flex: 1;
   font-size: 1em;
 }

}

nav a { 

 display: block;
 padding: 0.4em;
 text-decoration: none; 
 font-weight: bold;
 text-align: center;
 border: thin solid var(--background-color);
 border-radius: .5em;
 color: gold; 
 background-color: var(--background-color); 
 transition: all .25s ease-in;	 
 position: relative;

}

nav li[aria-current] a { 

 background-color: var(--accent2-color); 
 color: var(--accent1-color);

}

nav .subtitle::after { 

 position: absolute;
 content: " ▶";
 color: currentColor;
 display: inline-block;
 width: 2em;
 right:0;

}

nav .subtitle:hover::after, nav .subtitle:focus::after{ content:" ▼"; }

nav a:focus, nav a:hover, nav li[aria-current] a:focus, nav li[aria-current] a:hover { 

 color: var(--background-color); 
 background-color: var(--accent1-color);

}

/* submenu navigation links */ nav .submenu { 

 visibility: hidden;  
 height: 0;
 z-index: 1000;

} nav .submenu li { 

 display: block; 
 /* width: 15em; */

}

/** Show the submenu on hover, focus **/ nav li:hover .submenu, nav li:active .submenu, nav li:focus .submenu { 

 visibility: visible;
 height: auto;

} nav li:focus-within .submenu { 

 visibility: visible;
 height: auto;

}

root {

--background-color: midnightblue; --accent1-color: gold; --accent2-color: darkred; --text-color: black; } </style>

</head>

<body>

Menü 7: CSS-only, aber nicht zugänglich!!!

<nav>

  • <a href="#">Seite 1</a>
  • <a class="subtitle" href="#">Seite 2</a>
    • <a tabindex="0" href="#2a">Seite 2a</a>
    • <a tabindex="0" href="#2b">Seite 2b</a>
  • <a href="#">aktuelle Seite</a>
  • <a class="subtitle" href="#">Seite 4</a>
    • <a href="#4a">Seite 4a</a>
    • <a href="#4b">Seite 4b</a>
    • <a href="#4c">Seite 4c</a>
  • <a href="#">Seite 5</a>
  • <a href="#">Seite 6</a>

</nav>

Mit diesem Beispiel kann man die Submenüs …

  • … mit der Maus problemlos auf- und zuklappen.
  • … auf Touch-Gräten mit kleinen Viewports problemlos auf- und durch Tap auf einen anderen Link zuklappen.
  • … mit der Tastatur die Submenüs über das tabindex des li-Elements sichtbar machen, und dann den dazugehörigen Link und die Listeneinträge des Submenüs durchtabben.

Was nicht funktioniert, ist …

  • … eine schnelle Tastatur-Ansteuerung der einzelnen Menüpunkte im Hauptmenü ohne den Umweg über die einzelnen Submenüs zu gehen
  • … eine Navigation der einzelnen Punkte mithilfe der Pfeiltasten.</p> </ul>

</body>

</html>

Abgerufen am 14.08.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS_Men%C3%BCs7.html"

Navigationsmenü