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.

<title> Seitentitel

CSS - Listenelemente einfärben

PHP - Gerade Zahlen ausgeben

JavaScript - Die Höhe eines IFrames automatisch dem Inhalt anpassen

MySQL - Kleinsten Wert einer Tabellenspalte ermitteln

Meta-Tags einfügen
ie meisten Suchmaschinen nutzen Meta-Tags, die im Bereich zwischen dem <head> und </head> Tags einer HTML-Seite stehen, um eine gefundene Homepage näher einzuordnen. Meta-Tags finden Sie unter Meta-Angaben.