Rollover-Effekte in Menüs

Mit Hilfe von CSS ist es 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.

Das erste Beispiel zeigt einen Balken am rechten Rand des Menüs. Mit dem zweiten Beispiel erzeugst du einen Rahmen um das komplette Menüelement herum.

 

Zunächst erstellst du das Navigationsmenü.

Navigationsmenü-Element:

<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 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 einen einfachen, farbigen Balken am rechten Rand des Menüs, 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 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.