CSS - Navigation mit :target auf und zumachen

Zumachen Aufmachen

<style>

/* Navigation mit :target auf und zumachen */

nav {
 
displaynone;
}

#On:target ~ a ~ nav {
 
displayblock;
}

#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

Klicke um die Links zu öffnen


<style>

ul.liste {
 list-
style-typesquare;
}

ul.liste li::marker {
 
color#FFD700;
 
font-size1.5em;
}

summary.fassung::marker {
 
color#FFD700;
 
font-size1.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.

<small> Physische Auszeichnung

CSS - Hintergrundbild mit Zoom Funktion

PHP - Ein Wort in einem Text markieren

JavaScript - Ausgabe des aktuellen Datums

MySQL - Zeichenkette ersetzen mit REPLACE

Hintergrund-Sound
Ein gutes Mittel, um Besucher zu vergraulen. Hintergrundsound erhöht die Ladezeiten, hat eine billige Qualität und lässt sich oft nicht abschalten. Jeder hat einen anderen Musikgeschmack, den Sie so oder so fast nie treffen können. Daher bieten Sie einen Ein- und Ausschaltknopf für Hintergrundmusik an. So kann jeder Besucher individuell die Musik ein/ausstellen.