CSS
Rollover-Effekte in Menüs
- Details
- Veröffentlicht am Freitag, 12. Dezember 2008 20:39
- Geschrieben von Jan Pionzewski
Mit Hilfe von CSS ist es sehr leicht möglich, verschiedene Rollover-Effekte für Menüs zu erstellen. An dieser Stelle werden dafür zwei Beispiele genannt, mit denen sich Rollover-Effekte erzeugen lassen können. Das erste Beispiel zeigt einen Balken am rechten Rand des Menüs. Mit dem zweiten Beispiel wird ein Rahmen um das komplette Menüelement herum erzeugt.
Natürlich muss erst einmal das Navigationsmenü erstellt werden.
Beispiel:
<div id="navigation">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</ul>
</div>
Nun werden per CSS die verschiedenen Effekte definiert. Ob Sie dabei die Daten direkt in die HTML-Datei schreiben, oder ein externes Styelsheet verwenden, bleibt Ihnen überlassen.
Beispiel 1: Farbiger Balken am Menürand
#navigation a:link, #navigation a:visited {
display : block;
margin: 10px 0;
}
#navigation a:hover {
border-right:7px solid #AFBCA0;
}
Mit diesem Beispiel wird ein einfacher, farbiger Balken am rechten Rand des Menüs angezeigt, wenn der Besucher mit der Maus über einen Menüpunkt fährt.
Beispiel 2: Farbiger Rahmen um das Menü herum
#navigation a:link, #navigation a:visited {
display : block;
margin: 10px 0;
border: 2px solid #XXXXXX;
}
#navigation a:hover {
border:2px solid #AFBCA0;
}
Bei der Angabe border: 2px solid #XXXXXX müssen Sie als Farbe die Hintergrundfarbe Ihres Navigationsmenüs definieren. Dies ist notwendig, da dem Menü ein künstlicher Rahmen hinzugefügt werden muss, der im Grundzustand natürlich unsichtbar sein soll. Wird kein Pseudo-Rahmen eingefügt, würden die Menüpunkte beim Überfahren mit der Maus ein wenig hin und her springen, da vorher ja kein Rahmen vorhanden ist.
