 20 - horizontales CSS-Menü als HTML-Liste (Aufzählung <li>)
Ein zeitgemäßes Menü mit MouseOver-Funktion, das mit CSS-Anweisungen realisiert wurde. Es werden keine Grafiken verwendet. Farbanpassungen sind innerhalb einer Minute mit nur wenig Aufwand möglich. Lediglich die Farbwerte müssen geändert werden.
|
|
Aufzählungsliste als horizontales CSS-Menü ohne Grafiken und Tabellen
Das Menü ist als Liste definiert, der HTML-Code einfach strukturiert und leicht anpassbar. Jeder Link steht innerhalb von <li>-Tags. Demo:
Den eigentlichen Job der Darstellung als vertikales Menü übernehmen die CSS-Anweisungen. Der Schlüssel liegt zu allererst in der Anweisung 'display: inline;' .
Aubau des Menüs
Zunächst notiere ich die Textlinks für die Navigation. Dann deklariere ich die Textlinks als Liste. Die Textlinks erscheinen nun in der Formatierung, die ich allgemein für alle Links auf dieser Seite bestimmt habe. Siehe Beispiel rechts.
Ohne weitere CSS-Anweisungen würde das Menü angezeigt wie eine Liste, deren Aufzählungselemente als Links deklariert wurden. |
|
|
Dann fasse ich die Aufzählungsliste in <DIV>-Tags ein und vergebe für den DIV-Bereich eine ID, die ich als Arttibut eintrage (id="menue20").
Rechts sehen Sie den Quellcode
|
|
<div id="menu20">
<ul>
<li><a href="#">seite 01</a></li>
<li><a href="#">seite 02</a></li>
<li><a href="#">seite 03</a></li>
<li><a href="#">seite 04</a></li>
<li><a href="#">seite 05</a></li>
<li><a href="#">seite 06</a></li>
<li><a href="#">seite 07</a></li>
</ul>
</div>
|
Im Body-Bereich der HTML-Seite:
<div id="menue20">
hier steht das Menü als Aüfzählungsliste
</div>
Im Head-Bereich der HTML-Seite (Auszug):
Durch CSS-Notierungen für dieses Element mit der ID "menue20" erzwinge ich eine horizontale Darstellung und unterdrücke die Aufzählungszeichen. Das erreiche ich durch die CSS-Anweisungen "display:inline;"und "list-style:none;".
Das Menü würde zu diesem Zeitpunkt etwa so aussehen:
|
|
#menu20 ul {
padding:0px;
margin:0px;
}
#menu20 li {
list-style: none;
display:inline;
}
|
Ohne zusätzliche CSS-Anweisungen für die Textlinks erscheint das Menü nun wie eine Reihe von formatierten Textlinks nebeneinander. Etwas ansprechender sollte mein Menü schon aussehen. Deshalb erstelle ich nun Regeln für alle Listelemente als Textlinks, die im Div-Berich dieses Menüs mit der ID "menue20" stehen. Beachten sie die Schreibweise der Selektoren menü20, li, a
#menu20 li a {hier stehen die Anweisungen}
CSS-Angaben für Breite, Höhe, Textfarbe, Hintergrundfarbe, Padding und Rand sollen in der Kombination sicherstellen, das die Links als Text vor einem farbigen Hintergrund angezeigt werden. Durch eine abweichende Text- und Hintergrundfarbe für den Status 'hover', wird bei MouseOver der Link hervorgehoben.
#menu20 li a:hover {hier stehen die Anweisungen}
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.
1 Der HTML-Code für das Menü
Die HTML-Liste steht innerhalb von <DIV>-Tags über deren ID 'menue' die CSS-Formatierungen zugewiesen werden. Die Dateinamen für die zu verlinkenden Seiten werden von Ihnen anstelle der #-Zeichen eingetragen.
<div id="menue20">
<ul>
<li><a href="dateiname.htm">Seite 01>/a></li>
<li><a href="filename.php">Seite 02>/a></li>
<li><a href="ordner/datei.htm">Seite 03>/a></li>
<li><a href="http://www.domain.de/">Seite 04>/a></li>
<li><a href="#">Seite 05>/a></li>
<li><a href="#">Seite 06>/a></li>
<li><a href="#">Seite 07>/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 'menu20' zugeordnet.
<style type="text/css">
<!--
#menu20 ul {
padding: 0px;
margin: 0px;
}
#menu20 li {
list-style: none;
display: inline;
}
#menu20 li a {
font-family: Verdana,Tahoma,Arial,sans-serif;
font-size: 10px;
font-weight: normal;
text-align: center;
text-decoration: none;
color: #FFFFFF;
padding: 5px 10px 5px 10px;
background-color: #99CC00;
border: 1px solid #99CC00;
}
#menu20 li a:hover {
background-color: #FFCC00;
color: #000000;
border: 1px solid #000000;
}
-->
</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
1 Farben
Für farbliche Anpassungen müssen die Farbangaben geändert werden. Wählen Sie Text-, Hintergrund- und Randfarbe passend zu Ihrem Seitenlayout. Wählen Sie für den Hover-Effekt bei MouseOver Abstufungen der normalen Farben.
#menu20 li a {
...
color: #FFFFFF;
background-color: #99CC00;
border: 1px solid #99CC00;
padding: 2px 25px 2px 25px;
}
#menu20 li a:hover {
...
color: #000000;
background-color: #FFCC00;
border: 1px solid #000000;
}
2 Größe der Pseudo-Buttons
Erst einmal wird die Höhe der 'Buttons' von der gewählten Schriftgröße abhängen. Möchten Sie die 'Buttons' allerdings in der Größe verändern, können Sie mit verschiedenen Tricks arbeiten.
2a) Padding-Angaben verändern: (empfohlen)
#menu20 li a {
...
color: #FFFFFF;
background-color: #99CC00;
border: 1px solid #99CC00;
padding: 2px 25px 2px 25px;
...
}
Die Padding-Angaben werden im Uhrzeigersinn eingetragen (Oben, rechts, unten, links)
2b) Rand vergrößern
Um die Größe der 'Buttons' zu verändern, definieren Sie den Rand in einer angemessenen Pixelweite. Die Randfarbe wählen Sie identisch mit der verwendeten Hintergrundfarbe.
#menu20 li a {
...
background-color: #99CC00;
border: 6px solid #99CC00;
...
}
#menu20 li a:hover {
...
background-color: #00AFFF;
border: 6px solid #00AFFF;
...
}
2c) Zeilenhöhe verändern
Um die Höhe der 'Buttons' zu verändern, definieren Sie die Zeilenhöhe für die Textlinks. Dieser Eintrag ist in meinen CSS-Anweisungen zur Zeit nicht notiert. Angaben für die Zeilenhöhe beeinflussen nur die Höhe, nicht die Breite der 'Buttons'!
#menu20 li a {
...
line-height: 180%;
...
}
|
Home • CSS • Menüs • Aufzählungsliste
Beispiel 01