XHTML/CSS Tutorial: Horizontales Menü mit Mouseover-Effekt
In diesem Tutorial zeige ich Ihnen, wie Sie ein horizontales Menü inklusive Mouseover-Effekt mit XHTML/CSS realisieren.Dieses Tutorial baut auf dem Photoshop-Tutorial: Horizontales Menü mit Mouseover-Effekt auf. Dort haben wir diese Menüleiste erstellt:
Zu Beginn des Tutorials brauchen wir noch einmal Photoshop, um bestimmte Bildausschnitte (Slices) auszuschneiden. Dazu wähle ich das Slice-Werkzeug in meiner Werkzeugleiste:
Damit ziehe ich insgesamt vier Slices. Ganz links und ganz rechts jeweils ein Slice mit 2 Pixel Breite und voller Höhe. Außerdem jeweils ein Slice des normalen Hintergrunds und des Mouseover-Hintergrunds mit 1 Pixel Breite und voller Höhe:
Anschließend gehe ich auf "Datei" -> "Für Web und Geräte speichern" (Shortcut: ALT + UMSCHALT + STRG + S). In diesem Fenster kann ich jetzt jedes Slice anwählen und die Speicherparameter einstellen. Jedes Slice speichere ich als 8 Bit .png Datei ab. Klicke ich auf "Speichern", öffnet sich das Fenster, indem ich den Speicherort festlegen kann. Hier stelle ich ganz unten bei "Slices:" von "Alle Slices" auf "Alle Benutzer-Slices" um. Nun sollte das Programm nur die vier selbst gezogenen Slices abspeichern. Diese vier Bilddateien können jetzt in die HTML- und CSS-Datei eingebaut werden.
Dieser Code wird in der HTML-Datei verwendet:
<div id="menu">
<img src="bilder/menu_left.png" alt="" style="float:left;"/>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Platzhalter 1</a></li>
<li><a href="#">Platzhalter 2</a></li>
<li><a href="#">Platzhalter 3</a></li>
<li><a href="#">Platzhalter 4</a></li>
</ul>
<img src="bilder/menu_right.png" alt="" style="float:right;"/>
</div>
Dieser Code wird in der CSS-Datei verwendet:
#menu {
width:799px;
margin:20px;
}
#menu ul {
list-style:none;
}
#menu ul li {
float:left;
}
#menu ul li a {
background-image:url(bilder/menu_bg.png);
background-repeat:repeat-x;
display:block;
width:159px;
height:45px;
padding:15px 0;
margin:0;
text-align:center;
font-size:12px;
font-weight:bold;
font-family: Verdana;
color:#fff;
text-decoration:none;
text-shadow:1px 1px 0 #000;
}
#menu ul li a:hover {
background-image:url(bilder/menu_hover.png);
}
Die Dateien (HTML- und CSS-Datei, Bilddateien) können hier heruntergeladen werden: DOWNLOAD
Zurück zur Tutorial-Übersicht
