CSS – Eine Grafik – viele Menüs
Dieser Artikel beschreibt wie man mit ein wenig Javascript und CSS aus einer Grafik verschiedene Menüs erzeugen kann.
Komplettes Beispiel mit Demo
Als Grundlage für dieses Beispiel dient diese Grafik.
Diese kann natürlich für jeden Einsatzzweck angepasst werden in der Anzahl der Menüpunkte, Schriftarten und Farben.
In den Headbereich der Seite wird dann dieses kleine Javascript eingefügt. Dieses dient dazu die Positionen der Hintergrundbilder zu verändern.
<script type="text/javascript">
function vor (li, vw) {
document.getElementById(li).style.backgroundPosition = vw
}
function zur (li, vb) {
document.getElementById(li).style.backgroundPosition = vb
}
</script>
Dieser CSS Code ist für die Darstellung anzugeben:
.mbg {
display: block;
background-image: url(mbg.gif);
height: 15px;
width: 145px;
border-bottom: 1px solid #000000;
margin:1px;
}
Dieser Codeblock stellt dann die Links im Menü dar.
<a href="index.html" class="mbg" id="li1" style="background-position: 0 0;" onmouseover="return vor('li1', '145px 0');" onmouseout="return zur('li1', '0 0');"> </a>
<a href="index.html" class="mbg" id="li2" style="background-position: 0 15px;" onmouseover="return vor('li2', '145px 15px');" onmouseout="return zur('li2', '0 15px');"> </a>
<a href="index.html" class="mbg" id="li3" style="background-position: 0 30px;" onmouseover="return vor('li3', '145px 30px');" onmouseout="return zur('li3', '0 30px');"> </a>
<a href="index.html" class="mbg" id="li4" style="background-position: 0 45px;" onmouseover="return vor('li4', '145px 45px');" onmouseout="return zur('li4', '0 45px');"> </a>
Ein paar Erläuterungen hierzu:
1. Es muss für jeden Link eine ID notiert werden, hier li1 – li4
2. Die Backgroundposition muss festgelegt werden für den Mouseover und Mouseout Wert. Der Link soll hier eine Fläche von 145 x 15px haben. Also geht es mit 0, 0 los, ändert sich bei Mouseover auf 145, 0 und bei Mouseout auf wieder 0, 0
Beim zweiten kommen dann 15px, beim dritten 30px usw. hinzu.
Nun kann man mit CSS weitere Ausgabeformatierungen erreichen. Fünf verschiedene sind in diesem Beispiel aufgeführt.
Und trotz der verschiedenen Darstellung muss an der Background-Position nichts geändert werden. Ein weiterer Vorteil, durch das zusammenfassen in eine Grafik erspart man sich das vorladen der Grafiken.
Getestet mit IE6, FF und Opera…
Keine Kommentare vorhanden