Rollover-Effekte in Menüs

Mit Hilfe von CSS ist es zudem sehr leicht möglich, verschiedene Rollover-Effekte für Menüs zu erstellen. Dafür zeige ich in diesem Artikel zwei Beispiele, mit denen sich Rollover-Effekte erzeugen lassen können.

 

Rollover-Effekte erstellen

Im Folgenden zeige ich dir zwei Beispiele, mit denen du einen entsprechenden Rollover-Effekt erzeugen kannst. Das erste Beispiel zeigt dabei einen Balken am rechten Rand des Menüs. Mit dem zweiten Beispiel erzeugst du hingegen einen Rahmen um das komplette Menüelement herum.

Beide Beispiele kannst du dabei nacheinander ausprobieren. Kopiere einfach das entsprechende CSS Snippet in dein Stylesheet, um die Veränderung zu sehen.

 

Zuerst erstellst du das Navigationsmenü.

Navigationsmenü:

<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 kannst du schließlich mit CSS die verschiedenen Effekte definieren. Die Beispiele müssen dabei jeweils natürlich in dein Stylesheet eingefügt werden.

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;
 }

 

Erklärung:

Mit dem eben genannten Beispiel erzeugst du dabei einen einfachen, farbigen Balken am rechten Rand des Menüs. Allerdings erst dann, wenn der Seitenbesucher 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;
 }

 

Erklärung:

Bei der Angabe border: 2px solid #XXXXXX musst du als Farbe dabei die Hintergrundfarbe deines 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. Fügst du hingegen keinen Pseudo-Rahmen hinzu, springen die Menüpunkte beim Überfahren mit der Maus ein wenig hin und her.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.