Die aktive Seite per CSS im Menü hervorheben

Automatische Hervorhebung über CSS mit Hilfe von Kontext-Selektoren

Vorgehensweise:
body und jeder Menüpunkt erhalten IDs.
  • Das Skript gibt jeder Seite im body eine eigene ID : <body ID="impressum"> <body ID="leistungen"> <body ID="kontakt">
  • Das Menü bleibt auf jeder Seite dasselbe, aber jeder Menüpunkt erhält eine gesonderte ID : <li id="impressum"><a href="impressum>Impressum</a></li>

Quelltext:
<body ID="impressum">

<div ID="menue1">
  <li ID="startseite"><a href="startseite.html">Startseite</a></li>
  <li ID="kontakt"><a href="kontakt.html">Kontakt</a></li>
  <li ID="impressum"><a href="impressum.html">Impressum</a></li>
</div>

CSS:

#menue1 ul li { border:1px solid gray}
#menue1 ul li a {color:#0070C0; background-color:#dfdfdf}

/* Spezialformatierungen*/

/* zunächst für das umgebende Listenelement (vererbt sich nicht auf die Links!) */

body#impressum li#impressum {border:1px solid red}
body#kontakt li#kontakt {border:1px solid red}
body#startseite li#startseite {border:1px solid red}

/* dann für die eigentlichen Links, die hier eigene Farben bekommen */

body#impressum li#impressum a {color: gray; background-color:#0070C0}
body#kontakt li#kontakt a {color: gray; background-color:#0070C0}



http://www.perun.net/2004/11/23/aktuellen-link-mit-css-hervorheben/

Hinweise für hover-Effekt

Formatierungsänderungen beim hover können  Layout vernichten oder extrem störend werden (hüpfende Menüpunkte). Daher
  • Niemals kursiv, fett, Großschreibung etc,
  • Niemals die Einrückungen ändern (margin, padding)
  • Niemals Border hinzufügen oder Border-Breite ändern; Lösungsmöglichkeiten: bei Grundformatierung bereits einen unsichtbaren Border einbauen oder veränderte Borderstärke mit verändertem padding/margin ausgleichen

Üblich und problemlos: Farben, Hintergrundfarbe und Rahmenfarbe ändern.

Farben:  einfachste Möglichkeit ist kompletter Farbtausch, was aber bei sehr starkem Kontrast sehr unruhig wirken kann.

Elegant wirkt auch: Hintergrund-Farbübergang von links nach rechts, der beim hover sich umdreht, zur Zeit sehr modern.

Gesehen z.B. auf
http://www.on-mouseover.de/templates/hp19/index.html
http://www.on-mouseover.de/templates/hp80/index.html
http://sw-guide.de/
http://www.haufe.de/steuern/news
http://service.t-online.de/c/12/72/72/14/12727214.html (grauer Bereich wird farbig, ansonsten genauso abgestuft)

Fertige CSS-Menüs

http://www.cssplay.co.uk/menu/index.html
Der Designer Stu Nichols hat eine hervorragende und umfangreiche Sammlung von CSS-Menüs zusammengestellt, untergliedert in alle möglichen Kategorien. Zu sehen auf

http://www.cssplay.co.uk/menu/index.html

Google-Suche

Google

Geldverdienst mit Webseite