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üs6.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">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Menü 6</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;
}
nav li {
margin: 0.5em;
padding: 0;
font-size: 1.5em;
flex: 1 1 0%;
}
@media (min-width: 45em) {
nav > ul {
flex-direction: row;
}
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;
}
nav li[aria-current] a {
background-color: var(--accent2-color);
color: var(--accent1-color);
}
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);
}
:root {
--background-color: midnightblue;
--accent1-color: gold;
--accent2-color: darkred;
--text-color: black;
}
</style>
</head>
<body>
<h1>Menü 6: verschachtelte Listen (mit CSS)</h1>
<nav>
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a>
<ul class="submenu">
<li><a href="#">Seite 2a</a></li>
<li><a href="#">Seite 2b</a></li>
</ul>
</li>
<li aria-current="page"><a href="#">aktuelle Seite</a></li>
<li><a href="#">Seite 4</a>
<ul class="submenu">
<li><a href="#">Seite 4a</a></li>
<li><a href="#">Seite 4b</a></li>
<li><a href="#">Seite 4c</a></li>
</ul>
</li>
<li><a href="#">Seite 5</a></li>
<li><a href="#">Seite 6</a></li>
</ul>
</nav>
<p>Ziehen Sie das Browserfenster zusammen oder analysieren Sie das Beispiel im Seiteninspektor.
</body>
</html>
