Navigationsmenü mit unterschiedlichen Farben

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

 

Positionsabhängige Farben definieren

Es gibt im Grunde genommen drei Varianten, mit denen du später eine positionsabhängige Farbdefinition erreichen kannst. Diese möchte ich nun entsprechend vorstellen. Das Anzeigebeispiel findest du aber 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 ebenfalls eine einfache Lösung. In diesem Fall weist du dabei den verschiedenen Menüelementen einfach entsprechende CSS Klassen zu. Das funktioniert wie im Folgenden beschrieben:

 

Beispiel (CSS & HTML):

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; }
<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 daher manuell anpassen. Zum Glück funktioniert das ganze jedoch 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 hingegen nicht unterstützt.

 

Beispiel (CSS & HTML):

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; }
<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 genommen 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 hingegen 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 & HTML):

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

 

 

Kompatibilität

Dieses Script habe ich des Weiteren 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 dabei 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.