 19-B - CSS-Menüals HTML-Liste (Aufzählung <li>)
Ein zeitgemäßes Menü mit MouseOver-Funktion, das mit CSS-Anweisungen realisiert wurde. Hier werden Grafiken verwendet. Farbanpassungen sind innerhalb einer Minute mit nur wenig Aufwand möglich. Lediglich die Grafiken müssen ausgetauscht werden.
|
|
Aufzählungsliste als vertikales CSS-Menü mit Hintergrund-Grafiken
Der Aufbau dieses Menüs ist beinahe identisch mit meinem Menübeispiel
19-A, bei dem keine Grafiken verwendet werden und die Hintergrundfarbe getauscht wird. Hier werden bei MouseOver die Hintergrundgrafiken ausgetauscht.
Beispiele: Textlinks mit Hintergrundgrafiken, die bei MouseOver mittels CSS-Angaben ausgetauscht werden.
Aufbau des Menüs
Das Menü ist als Liste definiert, der HTML-Code einfach strukturiert und leicht anpassbar. Jeder Link steht innerhalb von <li>-Tags.
Den eigentlichen Job der Darstellung als vertikales Menü übernehmen die CSS-Anweisungen. Der Schlüssel liegt zu allererst in der Anweisung 'display:block;' (Block-Elemente sind im Textfluss untereinander angeordnet).
Textlinks im Menü:
Für jeden Menüpunkt habe ich Breite, Höhe und die Hintergrundgrafik definiert, die in der Kombination sicherstellen, das jeder Link als Text vor einem grafischen Button angezeigt wird.
Durch eine unterschiedliche Hintergrundgrafik für den Status 'hover', wird bei MouseOver der Link hervorgehoben.
Den Trennstrich zwischen den vertikal angeordneten Links erziele ich mit der Angabe 'margin-bottom:1px;' und der Hintergrundfarbe für den gesamten Menübereich. Diese Hintergrundfarbe 'leuchtet' durch den 1 Pixel-Abstand der Links.
Ohne zusätzliche CSS-Anweisungen für die Textlinks (Hintergrundfarbe, Breite, Höhe, Rand) würde das Menü aussehen wie eine Liste, deren Aufzählungselemente als Links deklariert sind. Die Textlinks erscheinen in der Formatierung, die ich allgemein für alle Links auf dieser Seite bestimmt habe. Siehe Beispiel rechts.
|
|
|
Das Menü funktioniert, gäbe aber optisch nicht allzuviel her. Außerdem möchte ich keine Aufzählungszeichen vor den Textlinks.
Deshalb notierte ich entsprechende CSS-Regeln für alle Listelemente dieser Textlinks, die in einem Div-Berich des Menüs mit der ID "menue" stehen. Beachten sie die Schreibweise der Selektoren #menu01, li, a
#menu li a {hier stehen die CSS-Regeln}
Durch eine andere Text- und Hintergrundfarbe für den Status 'hover', wird bei MouseOver der Link hervorgehoben.
#menu li a:hover {hier stehen die CSS-Regeln}
1 Der HTML-Code für das Menü
Die HTML-Liste steht innerhalb eines <DIV>-Containers über dessen ID 'menue01' die CSS-Formatierungen zugewiesen werden. Die Dateinamen für die zu verlinkenden Seiten werden von Ihnen anstelle der #-Zeichen eingetragen.
<div id="menu01">
<ul>
<li><a href="rote-baerchen.htm">rote Gummibärchen>/a></li>
<li><a href="#">gelbe Gummibärchen>/a></li>
<li><a href="#">grüne Gummibärchen>/a></li>
<li><a href="#">orange Gummibärchen>/a></li>
<li><a href="#">weiße Gummibärchen>/a></li>
...
</ul>
</div>
Beispiel für Attribute:
Während die Seite für den ersten Link im gleichen Fenster geöffnet wird, erfolgt die Anzeige der mit dem zweiten Link aufgerufenen Seite in einem neuen Browserfenster (target="_blank").
<li><a href="rote-baerchen.htm">rote Gummibärchen>/a></li>
<li><a target="_blank" href="http://www.clickstart.de">Clickstart>/a></li>
2 CSS-Anweisungen für das Menü (im HEAD)
Die CSS-Anweisungen werden über die ID 'menu01' zugeordnet.
<style type="text/css">
<!--
#menu01 {
width: 150px;
overflow:hidden;
}
#menu01 ul {
list-style-type: none;
margin:0px;
padding:0px;
}
#menu01 a {
display: block;
padding: 0px 0px 0px 13px;
width: 150px;
height: 24px;
line-height: 22px;
}
}
#menue01 a:link, #menue01 a:visited
{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight: normal;
color: #FFFFFF;
text-align:left;
text-decoration: none;
background-image: url(bg-button04-04.gif);
}
#menue01 a:hover
{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight: normal;
color: #7000C0;
background-image: url(bg-button04-03.gif);
}
-->
</style>
Aufwand:
- Ihre Textlinks als Aufzählung (<li>) deklarieren
- alles in einen <div>-Bereich einfassen
- für den <div>-Bereich die ID eintragen
- CSS-Anweisungen in den Head-Bereich kopieren
Grafiken
Den Quelltext des Menübeispiels finden Sie im Kopfbereich oben. Sie benötigen außerdem zwei Hintergrundgrafiken die Sie durch RechtsKlick herunterladen können.
 
 
 
 
Weitere (insgesamt 270) Grafiken mit geeigneten Abmessungen finden Sie im meiner
 MINI-IMAGE-Box  (8000 Minigrafiken für Webmaster)
Rubrik: leere Buttons
URL der Unterseite:
http://www.web-toolbox.net/abc/19-buttons-leer/01-images.htm
Das war's schon! Lassen sie sich von den langen Erklärungen hier nicht abschrecken und kopieren für einen ersten Versuch einfach den Code der Textdatei (Link Quellcode oben) in ihre Seite. Falls sie dann das Menü anpassen möchten oder weitere Erklärungen benötigen, lesen sie den betreffenen Abschnitt.
Wenn Ihnen das als Einstieg ausreicht öffnen Sie die Quellcodeseite, kopieren den Code in Ihre Seite und experimentieren weiter.
Anpassung des Menüs
a Farbgebung
Um das Menüs farblich anzupassen verwenden Sie einfach entprechend eingefärbte Buttons. Tragen Sie die neuen Dateinamen der Buttons ein.
background-image: url(dateiname);
b Höhe der Buttons
#menue01 a
{
display: block;
padding: 0px 0px 0px 13px;
width: 150px;
border-bottom: 1px solid #FFFFFF;
height: 24px;
line-height: 24px;
}
c Breite des Menüs
Um die Breite des Menüs anzupassen müssen Sie entsprechend breite Grafiken verwenden und ändern die beiden Einträge für 'width', die hier im Beispiel mit 150 Pixel festgelegt wurden.
width: 150px;
|
Home • CSS • Menüs • Aufzählungsliste