CSS - Navigation mit :target auf und zumachen
Zumachen Aufmachen
<style>
/* Navigation mit :target auf und zumachen */
nav {
display: none;
}
#On:target ~ a ~ nav {
display: block;
}
#Off:target ~ nav {
display: none;
}
</style>
<a href="#Off" id="On" class="Off">Zumachen</a>
<a href="#On" id="Off" class="On">Aufmachen</a>
<nav>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
</nav>
Die moderne Variante mit dem <details>-Tag
<style>
ul.liste {
list-style-type: square;
}
ul.liste li::marker {
color: #FFD700;
font-size: 1.5em;
}
summary.fassung::marker {
color: #FFD700;
font-size: 1.5em;
}
</style>
<details>
<summary class="fassung">
Klicke um die Links zu öffnen
</summary>
<p>
<ul class="liste">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</p>
</details>Vielen Dank an: Andrzej Kossowski - kossowski.biz für dieses Script.
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen HTML, CSS,
PHP, JavaScript und MySQL.
<q> Logische Auszeichnung
CSS - Container mit Eselsohren