Navigationsmenü mit unterschiedlichen Farben

CSS bietet unglaublich viele Möglichkeiten, die eigene Website zu gestalten. So ist es auch möglich, Farben anhand der Position in einer Liste zu vergeben. Damit lässt sich zum Beispiel ein farbenfrohes Navigationsmenü erstellen. Wie das funktioniert zeige ich in diesem Artikel.

 

Positionsabhängige Farben definieren

Es gibt insgesamt drei verschiedene Varianten, mit der du eine positionsabhängige Farbendefinition erreichen kannst. Diese möchte ich nun vorstellen. Das Anzeigebeispiel findest du wie gewohnt am Ende des Artikels. Dort kannst du dir alle drei Möglichkeiten gleichzeitig anschauen.

 

Variante 1: Statische Website

Für eine statische Website gibt es eine einfache Lösung. In diesem Fall weist du den verschiedenen Menüelementen einfach entsprechende CSS-Klassen zu. Das funktioniert wie folgt:

 

Beispiel (CSS):

ul { 
 width: 250px;
 margin-bottom: 20px; 
 float: left; 
 font-family:"Trebuchet MS", Arial, sans-serif; 
 }
 ul li { 
 list-style: none; 
 height: 44px; 
 } 
 
#nav1 li a { 
 width: 100px; 
 height: 40px; 
 line-height: 53px; 
 color: #333; 
 text-decoration: none; 
 display: block;
 border-bottom: 4px solid #999; 
 padding-left: 5px; 
 -webkit-transition: .2s all linear;
 -moz-transition: .2s all linear;
 -o-transition: .2s all linear;
 transition: .2s all linear; 
}
 #nav1 li a:hover { 
 border-width: 35px;
 height: 9px; 
}
 
#nav1 .startseite a { border-color: #636393; } 
#nav1 .kontakt a { border-color: #B5222D; } 
#nav1 .seo a { border-color: #D4953C; } 
#nav1 .scripting a { border-color: #609491; } 
#nav1 .webdesign a { border-color: #87A248; }

 

Beispiel (HTML):

<ul id="nav1">
 <li class="startseite"><a href="#">Startseite</a></li>
 <li class="kontakt"><a href="#">Kontakt</a></li>
 <li class="seo"><a href="#">SEO</a></li>
 <li class="scripting"><a href="#">Scripting</a></li>
 <li class="webdesign"><a href="#">Webdesign</a></li>
</ul>

Variante 2: Dynamische Website (für Internet Explorer ab Version 9)

Wenn du deine Webseite hingegen mit einem CMS wie WordPress oder Joomla betreibst, würde die statische Möglichkeit viel Aufwand bedeuten. Hier müsstest du die Templates manuell anpassen. Zum Glück funktioniert das ganze auch automatisch mit dem Pseudo-Selector nth-child. Allerdings funktioniert diese Möglichkeit mit dem Internet Explorer nur ab der Version 9. Ältere Versionen werden nicht unterstützt.

 

Beispiel (CSS):

ul { 
width: 250px;
margin-bottom: 20px; 
float: left; 
font-family:"Trebuchet MS", Arial, sans-serif; 
}
ul li { 
list-style: none; 
height: 44px; 
}
 #nav2 li a { 
 width: 100px; 
 height: 40px; 
 line-height: 53px; 
 color: #333; 
 text-decoration: none; 
 display: block;
 border-bottom: 4px solid #999; 
 padding-left: 5px; 
 -webkit-transition: .2s all linear;
 -moz-transition: .2s all linear;
 -o-transition: .2s all linear;
 transition: .2s all linear; 
 } 
 
#nav2 li a:hover { 
 border-width: 35px;
 height: 9px; 
 }
 #nav2 li:first-child a { border-color: #636393; } 
#nav2 li:nth-child(2) a { border-color: #B5222D; } 
#nav2 li:nth-child(3) a { border-color: #D4953C; } 
#nav2 li:nth-child(4) a { border-color: #609491; } 
#nav2 li:nth-child(5) a{ border-color: #87A248; }

 

Beispiel (HTML):

<ul id="nav2">
 <li class="startseite"><a href="#">Startseite</a></li>
 <li class="kontakt"><a href="#">Kontakt</a></li>
 <li class="seo"><a href="#">SEO</a></li>
 <li class="scripting"><a href="#">Scripting</a></li>
 <li class="webdesign"><a href="#">Webdesign</a></li>
</ul>

 

Variante 3: Dynamische Website (mit Unterstützung für ältere Internet Explorer Versionen)

Die dritte Möglichkeit erzeugt im Grunde das gleiche Navigationsmenü. Es unterstützt aber auch den Internet Explorer in den Versionen 7 und 8. Lediglich der Internet Explorer in Version 6 oder älter wird nicht mehr unterstützt. Solltest du also zwingend eine Unterstützung für diese alten Browser benötigen, müsstest du noch eine entsprechende Alternative anbieten.

 

Beispiel (CSS):

ul { 
width: 250px;
margin-bottom: 20px; 
float: left; 
font-family:"Trebuchet MS", Arial, sans-serif; 
}
ul li { 
list-style: none; 
height: 44px; 
} #nav3 li a { 
 width: 100px; 
 height: 40px; 
 line-height: 53px; 
 color: #333; 
 text-decoration: none; 
 display: block;
 border-bottom: 4px solid #999; 
 padding-left: 5px; 
 -webkit-transition: .2s all linear;
 -moz-transition: .2s all linear;
 -o-transition: .2s all linear;
 transition: .2s all linear; 
} #nav3 li a:hover { 
 border-width: 35px;
 height: 9px; 
} #nav3 li a { border-color: #636393; } 
#nav3 li+li a { border-color: #B5222D; } 
#nav3 li+li+li a { border-color: #D4953C; } 
#nav3 li+li+li+li a { border-color: #609491; } 
#nav3 li+li+li+li+li a{ border-color: #87A248; }

 

Beispiel (HTML):

<ul id="nav3">
 <li class="startseite"><a href="#">Startseite</a></li>
 <li class="kontakt"><a href="#">Kontakt</a></li>
 <li class="seo"><a href="#">SEO</a></li>
 <li class="scripting"><a href="#">Scripting</a></li>
 <li class="webdesign"><a href="#">Webdesign</a></li>
</ul>

 

 

Anzeigebeispiel ansehen

 

 

Browser-Kompatibilität

Dieses Script habe ich in folgenden Browsern getestet:

  • Google Chrome 31
  • Firefox 26
  • Internet Explorer 11
  • Opera 18
  • Safari (iPhone-Version, iOS 7.0.4)

In den genannten Browsern funktionierte das Script einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen oder hier nicht aufgeführten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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