Horizontale Navigation mit Css (Cascading Style Sheet) erstellen, die Navigation enthält einen Hover-Status der über eine GIF-Grafik realisiert wird
Am Ende der Seite stehen einige Horizontale Navigationen zum Download bereit.
Zuerst erstelle Ich das HTML, welches in den "body" eingefügt wird, um den Grundaufbau einer Css-Navigation darzustellen.
Die komplette Navigation wird in eine DIV-Box mit der ID Navigation gepackt.
<div id="navigation">
</div>
Die ungeordnete Liste "<ul></ul>" ist das Grundgerüst einer Navigation; die später eingefügten Links zu den einzelnen HTML-Seiten sind nichts anderes als eine Aufzählung von Listenpunkten, die untereinander oder nebeneinander angeordnet werden.
<div id="navigation">
<ul>
</ul>
</div>
Als letzter Schritt folgt die eigentliche Liste, die die Links zu den einzelnen HTML-Seiten enthalten.
<div id="navigation">
<ul>
<li><a href="#">Ihr Link</a></li>
<li><a href="#">Ihr Link</a></li>
</ul>
</div>
Der spannende teil beginnt nun, denn das Ganze muss über ein stylesheet formatiert werden.
Mit welchem Element man beginnt spielt keine Rolle - Ich beginne immer mit dem einfachsten und das ist die ungeordnete Liste.
Damit die Navigation nicht wie eine ungeordnete Liste dargestellt wird, wird über "list-style-type: none;" die Listenformatierung abgeschaltet.
#navigation ul {
list-style-type: none;}
Der Nächste Schritt ist die DIV-Box, in der die Navigation untergebracht ist.
Sie hat eine Höhe von 21px, einen Innenabstand links von 10px, was bewirkt, dass die Links nicht direkt am Außenrand kleben.
Die Hintergrundfarbe habe Ich gewählt im Falle, dass die Grafik zu spät oder überhaupt nicht geladen wird.
Da die erstellte Grafik incl. Hover-Status 42px beträgt, wird über die "background-position: 0 -21px" bewirkt, dass im Normal-Zustand die Grafik auf 21px beschränkt ist; über "repeat-x" wird festgelegt das die Grafik nur Horizontal gekachelt wird.
#navigation { height: 21px; padding: 0 0 0 10px; background-color: #c00; background-image: url(../../bilder/tutorial/css_navi/navigation.gif);; background-repeat:; }
Die Listenelemente <li></li>
Über "display: inline" wird bewirkt, dass die Links nicht untereinander sondern nebeneinander angeordnet sind.
Da ein oberes und unteres padding die Navigation zerreißen würde, wird über die Zeilenhöhe "line-height: 21px" erreicht, dass die Links mittig ausgerichtet werden.
#navigation li {
font-size: 11px;
display: inline;
line-height: 21px;}
Formatierung der Links
Die Links erhalten einen Innenabstand nach rechts und links von jeweils 10px und die Ausrichtung erfolgt linksbündig.
#navigation a { color: #ffffff; text-decoration: none; padding: 0 10px; float: left; }
Beim Hover-Effekt kommt wieder die Grafik ins Spiel; allerdings wird die Hintergrundposition auf null gestellt - somit wird der Hover-Effekt erreicht.
#navigation a:hover { background-image: url(../../bilder/tutorial/css_navi/navigation.gif); text-decoration: none; background-position: 0 0; }
Wie Sie sehen, kann man in kurzer Zeit mit Css eine ansehliche Navigation erstellen. Formatierungsmöglichkeiten gibt es manifag, da sind der eigenen Kreativität kaum Grenzen gesetzt.
Um nicht jedes Mal den kompletten Code in eine neu erstellte HTML-Seite einfügen zu müssen, eignet sich der Befehl "php inlude" hervorragend.
Weitere Beispiele einer horizontalen Navigation zum Downloaden.
Die ZIP-Dateien enthalten eine HTML-Datei und eine GIF-Grafik - den relativen Pfad zur Grafik müssen Sie natürlich anpassen.
anschauen download
anschauen download
anschauen download
anschauen download
anschauen download
anschauen download
