Beispiel:CSS Menüs3.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:Grundlayout.css">
<title>Menü 3: Rollover-Effekt</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");
width: 12em;
}
nav li {
margin: 0.5em;
width: 12em;
}
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(--accent2-color);
}
nav a:focus,
nav a:hover,
nav a:active {
color: var(--background-color);
background-color: var(--accent1-color);
}
:root {
--background-color: midnightblue;
--accent1-color: gold;
--accent2-color: steelblue;
--text-color: black;
}
</style>
</head>
<body>
<h1>Menü 3: Rollover-Effekt</h1>
<nav>
<ul>
<li><a href="#">Beispiel 1</a></li>
<li><a href="" aria-current="page">aktuelle Seite</a></li>
<li><a href="#">Beispiel 3</a></li>
<li><a href="#">Beispiel 4</a></li>
<li><a href="#">Beispiel 5</a></li>
<li><a href="#">Beispiel 6</a></li>
<li><a href="#">Diese Seite müssen Sie unbedingt gesehen haben.</a></li>
<li><a href="#">Noch etwas ganz wichtiges, das im Hauptmenü unterkommen muss!</a></li>
</ul>
</nav>
<p><strong>Tipp:</strong><br>Halte deine Navigation so kurz wie möglich!<br>Nachträglich eingefügte Listenelemente erschweren den <b>Nutzern</b> die schnelle Orientierung!<br>Gerade vertikale Menüs verführen dazu, noch schnell einen weiteren Listenpunkt anzuhängen!
</body>
</html>
