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.

<rt> Ruby Anmerkung

CSS - Texteingabe nur in Großbuchstaben

PHP - Prüfen ob die Datei in der Zeichenkodierung UTF-8 gespeichert wurde

JavaScript - Bei Bestätigung zur nächsten Seite

MySQL - Wie oft ist ein Eintrag in einer Spalte vorhanden

Fehlermeldungen
Wird eine Webseite nicht gefunden, etwa weil in den Suchmaschinen ein toter Link enthalten ist, gibt es eine Fehlermeldung, die weder optisch noch inhaltlich attraktiv ist. Eine typische Fehlermeldung lautet: 404 - File not found.

Eine selbst gestaltete Fehler-Weiterleitungsseite leitet den Besucher sicher zum Angebot der Webseite.