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.

<dl> Definitionsliste

CSS - Leuchtende blaue Eingabefelder

PHP - Differenz von einem festen Datum und heute

JavaScript - Markierten Text in ein Eingabefeld einfügen

MySQL - Anzahl der Datensätze in einer Spalte