13.02.2008
Navigation mit Link-Buttons
Allein mit Hintergrund- und Schriftfarben kann man bereits schöne Hover-Link-Effekte für eine Navigation erzielen. Wer noch weitere Ansprüche stellt, der kann für die einzelnen Links auch spezielle Buttons in Form kleiner Grafiken verwenden.
Nachfolgend werden zwei Varianten beschrieben, wie dies mit CSS möglich ist:
Eine Navi mit neutralen Buttons, bei der die Beschriftung über den HTML-Code erfolgt
und zum andern eine Navi mit reinen Grafik-Buttons, die bereits den Link-Text in grafischer Form enthalten.
Hinweis:
Beim ersten Hovern verschwindet der Link-Button für eine kurze Zeit (je nach Internetverbindung), bis der Hover-Button geladen ist. Es wird deshalb empfohlen, den Hover-Button "vorzuladen". Hierzu gibt es mehrere Möglichkeiten, die hier sehr verständlich erklärt sind.
1. Links mit neutralen Hintergrundbuttons
In diesem Fall werden die Buttons als Hintergrundgrafik eingebunden und über den HTML-Quelltext mit ihrer Linkbezeichnung beschriftet. Wir verwenden die übliche Listen-Navigation (da die einzelnen Listeneinträge gefloatet werden, muss anschließend gecleart werden, hier nach "<ul>"):
<div id="navi">
<ul>
<li> <a href="#">Seite 1</a> </li>
<li> <a href="#">Seite 2</a> </li>
<li> <a href="#">Seite 3</a> </li>
<li> <a href="#">Seite 4</a> </li>
<li> <a href="#">Seite 5</a> </li>
</ul>
<br style="clear: both;">
</div><!--Ende Navi-->
Für die einzelnen Links benötigen wir zwei Hintergrundbuttons: Einen für den "Normalzustand" und einen für den "Hover-Zustand". Diese Buttons könnt ihr euch entweder selbst mit einem Grafikprogramm basteln oder bei verschiedenen Anbietern im Web besorgen. Achtet darauf, dass die Buttons ausreichend breit sind, damit der Link-Text reinpasst. Es gibt auch noch eine Möglichkeit, "dynamische Buttons" zu verwenden, die sich der Textbreite anpassen; das kann aber mal Gegenstand eines weiteren Kapitels sein. Die hier verwendeten Buttons haben eine Größe von 130px auf 15px.
Im Beispiel soll eine horizontale Navigation gestaltet werden. Sie lässt sich mit wenigen Änderungen aber auch in eine vertikale Navigation verwandeln.
Das "Styling" unserer Button-Navigation erreichen wir mit folgenden CSS-Angaben:
#navi
{
font-size: 0.9em;
font-weight: bold;
}
#navi ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navi li
{
float: left;
margin-left: 5px;
}
#navi a
{
display: block;
padding: 5px;
width: 130px;
height: 15px;
background-image: url(lbutton.gif);
color: #68228B;
text-decoration: none;
text-align: center;
}
#navi a:visited
{
color: #F00;
}
#navi a:hover
{
color: #8B0000;
background-image: url(hbutton.gif);
}
Der Div #navi enthält einige allgemeine Angaben für die Links, wie z.B. Schriftgröße und Fettschrift. Man könnte ihm auch noch Breiten-, Höhen-, oder Abstandswerte zuweisen. Es ist darauf zu achten, dass Button- und Schriftgrößen sowie Padding-Werte aufeinander abgestimmt sind.
Warnhinweis:
Wenn der Besucher in seinem Browser die Schrift vergrößert, kann sie aus dem Button, dessen Grafikgröße fixiert ist, "herauslaufen".
Für #navi ul sind die Abstände auf "Null" gesetzt und es sollen keine Listenaufzählungspunkte erscheinen.
#navi li sorgt mit der float-Angabe dafür, dass die Listeneinträge (hier unsere Links) nebeneinander und damit horizontal angeordnet werden. Ihr Zwischenabstand wurde auf 5px gesetzt.
#navi a beinhaltet die allgemeinen Link-Angaben. display: block; sorgt dafür, dass die Links mit einer bestimmten Breite und Höhe dargestellt werden können.
Mit der Einbindung der ersten Buttongrafik - hier "lbutton.gif" (wie "Link-Button") benannt - erscheint bereits der Button.
Schließlich weisen wir noch eine Schriftfarbe zu, sorgen mit "padding" für etwas Abstand zwischen Text und Rand, verhindern den Link-Unterstrich und zentrieren den Linktext.
Bei #navi a: visited kann eine gesonderte Schriftfarbe für besuchte Links hinterlegt werden.
Gleiches gilt für #navi a: hover. Zusätzlich binden wir hier einen weiteren Button als Hintergrundgrafik ein, der beim Hovern erscheinen soll. Hier mit "hbutton.gif" wie "Hover-Button" bezeichnet.
Damit wäre die horizontale "Button-Navi" fertig, siehe Demo.
Wer sie gerne vertikal dargestellt hätte, löscht bei #navi li das "float: left;". Im Beispiel wurde außerdem der margin-left-Wert durch einen margin-top-Wert ersetzt, damit die Links etwas Zwischenabstand haben.
2. Links mit beschrifteten Buttons
Wer noch größere künstlerische Ansprüche an die Buttons stellt, kann sie auch mit einem Grafikprogramm wie z.B. Ulead Photo Impact X3
Auch ein solches Menü lässt sich mit CSS erstellen. Allerdings ist der Aufwand hierfür etwas größer, denn für jeden einzelnen Link muss mindestens eine Button-Grafik mit individueller Beschriftung hinterlegt werden, ggf. noch eine Hover-Grafik.
In diesem Fall bietet es sich an, für jeden einzelnen Link eine eigene CSS-Klasse zu definieren. Mir war dies für die Beispiel-Navi etwas zu aufwendig, weshalb ich sie auf zwei Links reduziert habe. Wichtig ist, dass das Prinzip klar wird.
Der HTML-Code kann aus obigem Beispiel übernommen werden.
Der nachfolgende CSS-Code bezieht sich auf eine horizontale Navigation, bei der die Links nebeneinander stehen. Sollen sie vertikal untereinander angeordnet werden, dann lasst bei li einfach das float: left; weg.
Da die Buttons bereits selbst eine Aufschrift haben (es können ebenso individuelle Bilder verwendet werden), muss der Linktext gelöscht werden, damit er nicht zusätzlich erscheint. Außerdem müssen wir nun jedem Link eine Klasse zuweisen, damit er den richtigen Button mit der richtigen Beschriftung bekommt.
<div id="navi">
<ul>
<li> <a class="button1" href="#"></a> </li>
<li> <a class="button2" href="#"></a> </li>
</ul>
<br style="clear: both;">
</div><!--Ende Navi-->
Im CSS-Teil können wir sämtliche Angaben löschen, die mit Textformatierung zu tun haben. Schließlich kommen in diesem Menü kein Text, sondern nur Grafiken vor.
Bei den allgemeinen Linkangaben #navi a werden die width- und height-Werte entsprechend den neuen Buttons angepasst.
Da es keine einheitliche, neutrale Buttons sind, wird für jeden Link eine eigene Klasse hinterlegt und mit den jeweils speziell beschrifteten Buttons bestückt:
#navi ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navi li
{
float: left;
margin-left: 5px;
}
#navi a
{
display: block;
width: 140px;
height: 60px;
}
a.button1:link, a.button1:visited
{
background-image: url(button1a.gif);
}
a.button1:hover
{
background-image: url(button1b.gif);
}
a.button2:link, a.button2:visited
{
background-image: url(button2a.gif);
}
a.button2:hover
{
background-image: url(button2b.gif);
}
Der erste Link erhält die Klasse button1, der zweite button2 usw.
a.button1:link, a.button1:visited enthält die Hintergrundgrafik ("button1a.gif") mit dem beschrifteten Button für den ersten Link im Normal- und besuchten Zustand.
In a.button1:hover ist die Hintergrundgrafik ("button1b.gif") für den beschrifteten Hover-Button hinterlegt.
Nach dem gleichen System werden nun für jeden weiteren Link zusätzliche Klassen hinterlegt. Für den zweiten Link hier ".button2" usw. Das Ergebnis seht ihr hier.
Zur Bildung von Link-Klassen sei auch auf diese Anleitung verwiesen.