CSS Tab Navigation Tutorial

Juli 15, 2008 | Kommentieren

Heute zeig ich euch wie man eine recht einfache Navigation mit CSS erstellen kann. Es handelt sich um eine einfache horizontale Tab-Navigation mit vier Punkten. Alles was man dafür braucht ist eine ungeordnete Liste (UL).
Fangen wir also gleich mit dem HTML an.

<ul id="simple-navi">
    <li class="active"><a href="#">HOME</a></li>
    <li><a href="#">ABOUT ME</a></li>
    <li><a href="#">DOWNLOADS</a></li>
    <li><a href="#">HILFE</a></li>
</ul>

Neben der ID “simple-navi” habe ich noch die Klasse “active” hinzugefügt um das aktive Tab später im CSS highlighten zu können.

Im CSS definieren wir zuerst die Elemente UL, LI und A der ID “simple-navi”

ul#simple-navi {
  list-style-type: none;
  width: 100%;
  float: left;
  font-family: Verdana ,Arial,sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  padding: 10px 0 0 0;
  background-color: #333;
}
 
ul#simple-navi li {
  display: block;
  float:left;
  margin: 0 0 0 4px;
}
 
ul#simple-navi li a {
  display: block;
  padding: 5px 8px;
  color: #fff;
  background-color: #999;
  text-decoration: none;
}

In dem UL Element bestimmen wir die position der Navigation, die Schrift und die Hintergrundfarbe. Im LI Element die Ausrichtung der Tabs sowie deren Abstand zueinander. Im A Element den inneren Tab Abstand (padding) sowie die Link- und Tabfarbe.
Jetzt folgt das CSS für das aktive Tab sowie für den Maus-Over-Effekt (hover):

ul#simple-navi li.active a,
ul#simple-navi li a:hover {
  background-color: #fff;
  color: #CC3366;
}

Das einzige was hier ausgetauscht wird ist die Hintergrund- und Linkfarbe.
Und so sieht es dann aus:

  • Delicious
  • Facebook
  • FriendFeed
  • Mister-Wong
  • Netvibes Share
  • Twitter
  • YiGG
  • Share/Bookmark