Grafische Navigation mit CSS gestalten

Es lassen sich mit der Gilder/Levin Replacement-Methode auch anspruchsvolle grafische Navigationen erstellen. Allerdings sind die hier verwendeten Grafiken sehr einfach gehalten und dienen nur als Beispiel.

HTML-Markup

Wie es sich für eine Navigation gehört, verpacken wir die Links in einer ungeordneten Liste <UL></UL>. Wobei das <a></a> Element der aktuellen Seite durch das <strong></strong> Element ersetzt wird. So wird vermieden, dass ein Link auf sich selbst zeigt. Die <span></span> Elemente dienen auch hier wieder als Container für die Hintergrundgrafiken und die Werte der ID Attribute entsprechen den CSS-Deklarationsblöcken.

<div id="navigation">
 <ul>
  <li><strong id="home-nav"><span></span>Startseite </strong></li>
  <li><a id="about-nav" href="#"><span></span>Kontakt </a></li>
  <li><a id="tuts-nav" href="#"><span></span>Tutorials </a></li>  
 </ul>
</div>

Wer hier etwas unsicher ist und nur Bahnhof versteht, sollte hier weiter lesen»

CSS Style-Angaben

Breite der Navigation festlegen.

#navigation {
 width:150px;
}

Alle Außen- und Innenabstände zurücksetzen. sowie die Schmuckpunkte ausblenden,

#navigation ul , #navigation li {
 margin:0;
 padding:0;
 list-style:none;
}

Damit die einzelnen Listenpunkte nicht so aneinander kleben, lassen wir einen kleinen Außenabstand.

#navigation ul li {
margin-bottom:2px;
}

Um für alle <a></a> und <strong></strong> Elemente eine Breite und Höhe zuweisen zu können, müssen diese erst zum Blockelement erhoben werden. Mit position:relative; wird eine wichtige Voraussetzung getroffen, um die benötigten <span></span> Elemente absolut innerhalb von a und strong zu positionieren. Die Angabe overflow:hidden; verhindert ein Vorgucken der Linktexte bei einer Schriftgrößenänderung.

#navigation a , #navigation strong {
 position:relative;
 height:50px; /* Entspricht der Grafikhöhe pro Zustand */
 width:150px; /* Entspricht der Grafikbreite */
 display:block;
 background:#09c;
 color:#ffa;
 text-align:center;
 overflow:hidden;
}

Aktuell besuchte Seite mit <strong>Startseite</strong>hervorheben.

#navigation strong {
 background:#a33;
 color:#fff;
}

Angaben für den Rollover-Effekt festlegen.

#navigation a:hover {
 background:#ffa;
 color:#09c;
}

So würde die Navigation bei deaktivierter Grafikanzeige aussehen.

Damit noch eine akzeptable Schriftgrößenänderung möglich ist, verzichten wir hier auf die Angabe von padding und lassen den Linktext lieber am oberen Rand kleben.

Text durch Grafik ersetzen

Die benötigten Grafiken für dieses Beispiel haben die Maße von 150 x 100 Pixel. Damit keine weitere Grafik für den Hover-Zustand geladen werden muss, sind beide Zustände in einer einzigen Grafik vereint.

home about tutorials

Die folgende Deklarationsanweisung für das <span></span> Element, bildet die Grundlage um Linktexte durch Grafiken zu ersetzen. Um auch hier Breiten- und Höhenangaben notieren zu können, muss das <span> Tag ebenfalls zum Blockelement befördert werden. Damit sich die Hintergrundgrafik auch über den Linktext legt, ist die Angabe von position:absolute; zwingend notwendig.

 
#navigation a span , #navigation strong span {
 position:absolute;
 left:0;
 top:0;
 height:50px; /* Entspricht der Grafikhöhe pro Zustand */
 width:150px; /* Entspricht der Grafikbreite */
 display:block;
}
 

Hintergrundgrafiken zuweisen

Mit den letzten Deklarationsanweisungen werden den einzelnen <span></span> Elementen die benötigten Hintergrundgrafiken zugewiesen. Die Angabe von no-repeat kann für dieses Beispiel auch weggelassen werden, da die Grafik so groß wie das span Element ist und somit keine Wiederholung durchgeführt wird. Beim Hovern wird die Hintergrundgrafik einfach um 50 Pixel nach oben verschoben.

#navigation a#home-nav span {
 background:url(home.gif) no-repeat 0 0 ;
} 

#navigation a#about-nav span {
 background:url(about.gif) no-repeat 0 0 ;
}

#navigation a#tuts-nav span {
 background:url(tuts.gif) no-repeat 0 0 ;
} 

#navigation a:hover#home-nav span , #navigation strong#home-nav span  {
 background:url(home.gif) no-repeat 0 -50px ;
} 

#navigation a:hover#about-nav span , #navigation strong#about-nav span  {
 background:url(about.gif) no-repeat 0 -50px ;
}

#navigation a:hover#tuts-nav span , #navigation strong#tuts-nav span {
 background:url(tuts.gif) no-repeat 0 -50px ;
} 

So, dass war's schon und ich hoffe, dass ich mich verständlich genug ausgedrückt habe.

Hier nun das fertige Ergebnis.

Eine Übersicht aller bekannten Image-Replacement-Techniken von Jens O. Meiert findet ihr hier»

erstellt am 05.07.2011

nach oben