SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:CSS Menüs7.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>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>
<h1>Menü 7: CSS-only, aber nicht zugänglich!!!</h1>
<nav>
<ul>
<li><a href="#">Seite 1</a></li>
<li tabindex="0"><a class="subtitle" href="#">Seite 2</a>
<ul class="submenu">
<li><a tabindex="0" href="#2a">Seite 2a</a></li>
<li><a tabindex="0" href="#2b">Seite 2b</a></li>
</ul>
</li>
<li aria-current="page"><a href="#">aktuelle Seite</a></li>
<li tabindex="0"><a class="subtitle" href="#">Seite 4</a>
<ul class="submenu">
<li><a href="#4a">Seite 4a</a></li>
<li><a href="#4b">Seite 4b</a></li>
<li><a href="#4c">Seite 4c</a></li>
</ul>
</li>
<li><a href="#">Seite 5</a></li>
<li><a href="#">Seite 6</a></li>
</ul>
</nav>
<div>
<p>Mit diesem Beispiel kann man die Submenüs …</p>
<ul>
<li> … mit der Maus problemlos auf- und zuklappen.
<li> … auf Touch-Gräten mit kleinen Viewports problemlos auf- und durch Tap auf einen anderen Link zuklappen.
<li> … 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.
</ul>
<div style="background: #fed8cd; border: thin solid #c82f04; border-radius:0.5em; padding: 1em;">
<h2 style="color:#c82f04">Was nicht funktioniert, ist …</h2>
<ul>
<li> … eine schnelle Tastatur-Ansteuerung der einzelnen Menüpunkte im Hauptmenü ohne den Umweg über die einzelnen Submenüs zu gehen
<li> … eine Navigation der einzelnen Punkte mithilfe der Pfeiltasten.</p>
</ul>
</div>
</body>
</html>
