Navigationsmenü mit unterschiedlichen Farben

CSS bietet unglaublich viele Möglichkeiten, die eigene Website ansprechend 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 dir 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 dir nun im weiteren Verlauf vorstellen. Wie gewohnt findest du ein Beispiel zum Angucken 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:

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

Sobald du das CSS Snippet in deinem Stylesheet integriert hast, ist es einsatzbereit. Jetzt musst du nur noch deine Website anpassen. Anhand des eben gezeigten Snippets sieht das dann wie folgt aus:


Beispiel:

<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. Dazu nutzt du den Pseudo-Selector nth-child.

Damit fällt jedoch die Unterstützung für ganz alte Versionen vom Internet Explorer weg. Erst der IE 9 oder neuer kann das Navigationsmenü mit unterschiedlichen Farben hiermit darstellen.


Beispiel:

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

Die Einbindung in den HTML Code sieht dabei wieder genau so aus, wie im vorigen Beispiel auch.


Beispiel:

<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 Versionen vom IE)

Die dritte Möglichkeit erzeugt im Grunde genommen das gleiche Menü. Es unterstützt aber auch den IE in den Versionen 7 und 8. Nur der IE in Version 6 oder älter wird nicht mehr unterstützt.

Für den unwahrscheinlichen Fall, dass du noch Besucher mit solch alten Browsern hast, müsstest du noch eine Alternative anbieten.


Beispiel:

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

Auch hier fügst du das Snippet wieder genau so in dein HTML ein, wie zuvor in den Beispielen auch schon gezeigt.


Beispiel:

<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:

Folge einfach diesem Link (öffnet in einem neuen Tab), um dir das Beispiel anzusehen.

Browser Test

Das oben genannte CSS Snippet habe ich überdies 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 funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.


Anzeige:


Schreibe einen Kommentar