22.02.2008
Navigation mit ausfahrbaren Registern
Eine Navigation, bei der beim Hovern die Link-Buttons ausfahren - eine mal etwas andere und nicht immer übliche Variante.
Das Ergebnis soll etwa so aussehen wie in der Demo Seiten-Register-Navi oder Top-Register-Navi.
Im Prinzip haben wir den gleichen Aufbau wie bei dieser Anleitung. Deshalb soll hier nur auf die Besonderheiten eingegangen werden, auf die es hier ankommt.
Für jeden Link erstellen wir uns mit einem Grafik-Programm wie hier mit Ulead Photo Impact X3
1. Seiten-Register-Navigation
Die hier verwendeten Buttons sind 35px auf 80px groß und sehen so aus:
(Ich bitte um Nachsicht, wenn diese und die später folgenden Buttons etwas verpixelt sind - bin leider kein "Pixelschieber", aber es kommt hier ja primär auf den CSS-Code an.)
Sie werden wie üblich in eine Listen-Navigation per Hintergrundgrafik bei den Links eingebaut. Der Div #navi ist linksgefloatet, damit sich der #content rechts daneben anordnen kann. #navi erhält eine Breite, die der Grafikbreite entspricht, hier also 35px.
Je nachdem wie die Navigation vertikal ausgerichtet werden soll, erhält sie einen entsprechenden margin-top-Wert, hier 100px.
Für jeden Link verwenden wir eine gesonderte Klasse:
.home
{
background: url(button1.gif);
background-position: 12px 0;
background-repeat: no-repeat;
}
.about
{
background: url(button2.gif);
background-position: 12px 0;
background-repeat: no-repeat;
}
.contact
{
background: url(button3.gif);
background-position: 12px 0;
background-repeat: no-repeat;
}
Für den "Ausfahr-Effekt" kommt es entscheidend auf die Hintergrundposition an, hier background-position: 12px 0;.
Der erste Wert bedeutet, dass die Hintergrundgrafik von ihrer Normalposition 12px nach rechts eingerückt ist. Von den 35px Gesamtbreite sind im normalen Linkzustand somit lediglich 23px sichtbar. Die zweite Angabe "0" bedeutet, dass an der regulären vertikalen Position nichts verändert wird.
Mit background-repeat: no-repeat; sorgen wir dafür, dass sich die Grafik nicht kachelt, schließlich hätte sie durch das Einrücken noch Platz, den sie ohne diese Eigenschaft auch ausfüllen würde.
Nun brauchen wir lediglich noch eine Angabe die dafür sorgt, dass sich das "Register" beim Hovern auch ausfährt.
Aus Zweckmäßigkeitsgründen fassen wir diesemal alle drei Klassen zusammen, da in der Demo die gleichen Ausgangsbuttons verwendet werden. Bei abweichenden Buttons müsste die Hoverangabe wie oben gesondert für jede Klasse und unter Angabe der zweiten Hintergrundgrafik erfolgen.
a.home:hover, a.about:hover, a.contact:hover
{
background-position: 0 0;
}
Mit background-position: 0 0; sorgen wir lediglich dafür, dass die komplette Grafik angezeigt wird. Vorher hatten wir sie um 12px nach rechts verschoben und damit einen Teil unsichtbar gemacht. Der optische Hover-Effekt sieht nun so aus, als würde das Register "ausfahren".
Die Demo enthält nochmals den kompletten CSS- und HTML-Quelltext.
2. Top-Register-Navigation
Natürlich kann das Menü auch am oberen Rand horizontal angeordnet werden. Wir benötigen hierzu entsprechende neue Bottons im Querformat, hier 90px auf 40px. Eurer Fantasie sind bei der grafischen Gestaltung keine Grenzen gesetzt.
Da die Navigation nun horizontal angordnet wird, brauchen wir bei #navi überhaupt keine Angaben zu hinterlegen, es sei denn, sie soll bestimmte margin-Werte erhalten.
Beim #content entfällt der Linksabstand. Seine Breite wird unter Berücksichtigung von Padding- und Border-Werten an die des übergeordneten Wrappers angepasst.
Über
#navi li
{
display: inline;
float: left;
margin-right: 8px;
}
Beachte:
Da die einzelnen Listeneinträge gefloatet sind, muss nach dem Schließen von </ul> gecleared werden mit
<br style="clear: left;">
Bei den einzelnen Link-Klassen verstecken wir jetzt die Buttons nicht nach rechts, sondern nach unten. Dies erfolgt mit entsprechend anderen Werten für die Hintergrund-Positionsangabe:
.home
{
background: url(button1h.gif);
background-position: 0 17px;
background-repeat: no-repeat;
}
.about
{
background: url(button2h.gif);
background-position: 0 17px;
background-repeat: no-repeat;
}
.contact
{
background: url(button3h.gif);
background-position: 0 17px;
background-repeat: no-repeat;
}
In der Demo ist wieder der komplette CSS- und HTML-Code abgebildet.
Quellenhinweis:
Die Anregung für diese Anleitung stammt von dieser Seite.