Beispiel mit aufklappbaren Menüs

Das hier gezeigte Beispiel ist komplett per CSS realisiert und eigentlich recht einfach. Es bedient sich des Umwegs über Listen, die beim Hover-Ereignis angezeigt werden.

Leider wird das Beispiel nicht von allen Browsern richtig angezeigt: Im Internet Explorer klappen die Menüs nicht auf, während Firefox, Netscape 7 und Opera 8.5 keine Probleme mit der Anzeige haben. Deshalb sei dieses Beispiel hier nur der Vollständigkeit halber gezeigt, denn die vielen, vielen Benutzer des Internet Explorers haben nichts von diesem Menü. Eine gute Nachricht: Mit dem Erscheinen des IE 7 Mitte 2006 soll sich das ändern, allerdings müssen dann Millionen von Nutzern auf den IE 7 umsteigen - das wird dauern.

Aber auch der HTML-Editor zeigt in der programminternen Voransicht diese Menüs nicht richtig an - Sie müssen also die Datei beim Bearbeiten immer mit einem Browser aufrufen.

Hier der Code:

body {
background:green;
padding:5px;
}
 Der <body> hat nicht viele Eigenschaften, nur Hintergrundfarbe und Innenabstand.
#links {
background:darkgreen;
border:1px solid lightseagreen;
height:1.5em;
}
 Der Container für die Hyperlinks ist dunkelgrün mit einem hellen Rand und anderthalb mal so groß wie die enthaltene Schrift.
#links a {
width:100%;
height:100%;
text-align:center;
display:block;
font:bold 0.8em sans-serif;
padding:7px;
text-decoration:none;
color:rgb(205,205,205);
}
 Durch die Angaben für Breite und Höhe von 100 % und display:block füllen die Hyperlinks komplett die Listenpunkte aus.
#links a:hover{color:white;}
 Beim Hovern wird die Schriftfarbe der Hyperlinks weiß.
.menu {
width:auto;
float:left;
padding: 0.3em 0.5em 0.3em 0.5em;
font:bold 0.8em sans-serif;
color:white;
cursor:default;
}
 Mit der Klasse .menu werden die Einträge in die Hyperlinkleiste festgelegt: Die Breite wird automatisch anhand der Textlänge bestimmt und die Elemente liegen durch float:left nebeneinander. Die Angabe cursor:default bewirkt, dass sich der Cursor beim Hovern über die Hauptmenüeinträge nicht verändert - da es sich bei den Hauptmenüeinträgen um Text handelt, würde der Mauszeiger beim Hovern über sie die Form der Einfügemarke annehmen.

.menu ul {
display:none;
position:absolute;
background-color:darkgreen;
color:white;
list-style:none;
margin:0 0 0 -0.6em;
padding:0;
border:1px solid lightseagreen;
border-top:none;
}
 Die Liste mit den Hyperlinks ist normalerweise nicht sichtbar (display:none), sie wird erst beim Hovern über die Hauptmenüeinträge aufgeklappt. Die Angabe position:absolute bewirkt, dass das aufklappende Menü über dem darunterliegenden Text erscheint. Durch list-style:none werden keine Aufzählungszeichen bei der Liste angezeigt. Der negative Rand links (-0.6em) lässt die Listeneinträge genau unter dem Haupteintrag erscheinen, die sonst immer etwas eingerückt werden. Der Rahmen um die Liste erscheint rechts, unten und links.
.menu ul li {
display: block;
padding: 0.1em 2em 0.1em 1em;
}
 Die Listenelemente werden im Block, also untereinander angezeigt.
.menu:hover ul {
display: block;
margin-top:0.3em;
padding: 0;
}
 Hovert man über ein Element des Hauptmenüs, so wird die Liste angezeigt.
div.menu ul li:hover {background:seagreen;}
 Hovert man über einen Eintrag in der Liste, so ändern sich Hintergrund.

Und so funktioniert es:

Im Bereich #links werden neue <div>-Elemente der Klasse .menu definiert, die eine Liste mit Listeneinträgen und den Hyperlinks enthalten. Die Menüeinträge werden aufgrund des Attributs float:left nebeneinander angezeigt, während die Listen mit den Einträgen abhängig von der Lage des Elternelements positioniert werden.

Hier der relativ kurze HTML-Code:

<div id="links">

<div id="menu1" class="menu">Home
<ul>
<li><a href="../../../index.html">Startseite</a></li>
</ul>
</div>

<div id="menu2" class="menu">Schule
<ul>
<li><a href="../../acc_6b/index_6b.html">Datenbanken</a></li>
<li><a href="../../graphik/index_graphik.html">Graphik</a></li>
<li><a href="../index_css_schwarz.html">HTML</a></li>
</ul>
</div>

<div id="menu3" class="menu">CSS-Seiten
<ul>
<li><a href="http://www.bjoernsworld.de/css/">http://www.bjoernsworld.de/css/</a></li>
<li><a href="http://css.fractatulum.net/">http://css.fractatulum.net/</a></li>
</ul>
</div>