 19-A - CSS-Menü als HTML-Liste (Aufzählung <li>)
Ein zeitgemäßes Menü mit MouseOver-Funktion, das mit CSS-Anweisungen realisiert wurde. Farbanpassungen sind innerhalb einer Minute mit nur wenig Aufwand möglich. Lediglich die Farbwerte für die Hintergrundfarbe müssen geändert werden.
|
|
Aufzählungsliste als vertikales CSS-Menü ohne Grafiken und Tabellen
Dieses Menü verwende ich in der Homepage-Vorlage CSS-10-2, die in 8 Versionen als Download zur Verfügung steht (Menü HP-Vorlagen Downloads)
 Webseitenvorlage CSS 10-2
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 die Breite, die Höhe und die Hintergrundfarbe definiert, die in der Kombination sicherstellen, das jeder Link als Text vor einem farbigen Hintergrund angezeigt wird, der unabhängig von der Länge des Textes, einheitlich breit ist.
Durch eine unterschiedliche Hintergrundfarbe 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 menu, 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 eines <DIV>-Containers über dessen ID 'menue' die CSS-Formatierungen zugewiesen werden. Die Dateinamen für die zu verlinkenden Seiten werden von Ihnen anstelle der #-Zeichen eingetragen.
<div id="menu">
<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 'menu' zugeordnet.
<style type="text/css">
<!--
#menu {
width: 160px;
margin: 0 0 0 0;
padding: 0px;
background-color:#7F7F7F;
}
#menu ul {
list-style: none;
width: 160px;
margin: 0 0 0 0;
padding: 0;
}
#menu li {
margin-bottom:1px;
}
#menu li a {
display:block;
font-family:Verdana,Tahoma,Arial,sans-serif;
font-size: 10px;
font-weight:normal;
text-align:left;
text-decoration:none;
color:#AFAFAF;
background-color:#2F2F2F;
height:20px;
line-height:170%;
padding:0px 0px 0px 8px;
}
##menu li a:hover {
background-color:#7F7F7F;
color:#FFFFFF;
}
-->
</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
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 Farben
Für farbliche Anpassungen müssen die Farbangaben geändert werden. Wählen Sie Text- und Hintergrundfarbe passend zu Ihrem Seitenlayout.
Wählen Sie für den Hover-Effekt bei MouseOver Abstufungen der normalen Farben.
|
|
#menu li a {
...
color:#000000;
background-color:#FFD7EA;
}
#menu li a:hover {
background-color:#F484B7;
color:#FFFFFF;
}
b Höhe der Pseudo-Buttons
Grundsätzlich wird die Höhe der 'Buttons' von der gewählten Schriftgröße abhängen. Es gibt keinerlei Probleme, wenn Sie mit dem Menü (und der Höhe der 'Buttons') in dieser Form zufrieden sind.
Überspringen Sie bei der Lektüre diesen Abschnitt b wenn Sie CSS-Beginner sind oder nicht die Absicht haben, mit dem Layout der 'Buttons' zu experimentieren!
Möchten Sie die 'Buttons' allerdings in der Höhe vergrößern, gibt es in einigen Browsern Probleme den Text vertikal mittig auszurichten. Wegen den allgemeinen Schwierigkeiten bei der vertikalen Ausrichtung mit CSS, können Sie mit verschiedenen Tricks arbeiten:
1) Um die Höhe der 'Buttons' zu vergrößern, definiere ich einen oberen und unteren Rand von 3 Pixel. Die Randfarbe wähle ich identisch mit der verwendeten Hintergrundfarbe.
Im Beispiel rechts beim 1. Link zu Demozwecken nicht.
|
|
#menu li a {
...
background-color:#92AFEC;
border-bottom: 3px solid #92AFEC;
border-top: 3px solid #92AFEC;
}
#menu li a:hover {
background-color:#2C6ED5;
border-bottom: 3px solid #2C6ED5;
border-top: 3px solid #2C6ED5;
}
2) Um die Höhe der 'Buttons' zu vergrößern, lege ich mit 'height' die Höhe der 'Buttons' z.B. mit 25 Pixel fest. Zur vertikalen Ausrichtung notiere ich eine Zeilehöhe (z.B. 250%), die den Text vertikal so verschiebt, dass er mittig dargestellt wird.
Textformatierung hier:
font-size: 11px;
font-weight:bold;
|
|
#menu li a {
...
height:25px;
line-height:250%;
}
3) Um die Höhe der 'Buttons' zu vergrößern, lege ich mit 'padding' den Abstand oben und unten mit einer festen Angabe in Pixel fest. Zur vertikalen Ausrichtung notiere ich eine Zeilehöhe (z.B. 170%), die den Text vertikal so verschiebt, dass er mittig dargestellt wird.
|
|
#menu li a {
...
padding:3px 0px 3px 0px;
line-height:180%;
}
Wie ich bereits erwähnte, gibt es keinerlei Probleme wenn die Textgröße die Höhe bestimmt. Ansonsten können Sie gerne ein wenig mit den verschiedenen Browsern experimentieren. Die Methode mit den farbig angepassten Rändern oben und unten hat sich als die Zuverlässigste herauskristallisiert.
c Breite des Menüs
Um die Breite des Menüs anzupassen ändern Sie den Eintrag für 'width', der hier im Beispiel mit 160 Pixel festgelegt wurde.
#menu ul {
list-style: none;
width: 160px;
margin: 0 0 0 0;
padding: 0;
}
Sie erinnern sich: Bei einem Wert von '0' (Null) muss keine Einheit wie 'px', 'pt', 'cm' ... eingetragen werden. Sollten Sie andere Werte als '0' einsetzen, Einheit nicht vergessen!
#menu ul {
list-style: none;
width: 160px;
margin: 5px 2px 2px 2px;
padding: 0px;
}
|
Home • CSS • Menüs • Aufzählungsliste
Beispiel 01