Galerie
Tipps zum Anlegen von Untermenüs mit CSS
CSS-Attribut display: Horizontale Menüleiste oben auf der Webseite.
Tipp 1: Horizontale Menüleisten
Der Tipp zeigt Ihnen, wie Sie eine Menüleiste horizontal anordnen.
Für kaskadierende Menüs mit wenigen überschaubaren Kategorien eignet sich meist eine horizontale Anordnung oben auf der Webseite. Die einzelnen Menüpunkte klappen dann nach unten auf, wenn der Benutzer mit dem Mauszeiger über eine Kategorie fährt. Wenn die einzelnen Menüpunkte unterschiedlich breit sein dürfen, erreichen Sie eine horizontale Anordnung ganz einfach, indem Sie nur das CSS-display-Attribut mit dem Wert inline auf die Listenpunkte anwenden.
.menu li {
display: inline;
...
}
Beachten Sie, dass den inline-Elementen keine Breite zugewiesen werden darf. Diese passt sich automatisch dem Inhalt an, hier also dem enthaltenen Text. Daher ist es wichtig, alle Angaben zu width wegzulassen. Das gilt hier sowohl für die einzelnen Listenpunkte als auch für die integrierten Anchor-Elemente. Andernfalls würde die Menüleiste nach wie vor vertikal dargestellt. Mit der CSS-Eigenschaft text-align zentrieren Sie die Menüleiste.
.menu {
text-align: center;
...
}
Wert left für das float-Attribut: Linksbündige Navigationsleiste mit einheitlicher Breite der Menüpunkte.
Tipp 2: CSS-Eigenschaft float
So stellen Sie die Menüpunkte, unabhängig von deren Inhalt, mit einer einheitlichen Breite dar.
Alternativ zu der im ersten Tipp beschriebenen Methode verwenden Sie das Attribut float, um die Breite der einzelnen Menüpunkte zu vereinheitlichen. Diese legen Sie wiederum mit dem Wert für das width-Attribut fest.
.menu li a {
float: left;
width: 100px;
...
}
Dass der Inhalt umbrochen oder teilweise nicht angezeigt wird, brauchen Sie nicht zu befürchten. Die Mindestbreite passt sich unabhängig von der Angabe zu width nach wie vor dem enthaltenen Text an. Das display-Attribut mit dem Wert inline wenden Sie genauso wie im ersten Tipp auf die Listenelemente an, um Zeilenumbrüche zu verhindern.
Die float-Eigenschaft, angewandt auf ein Element, macht dieses wiederum zum Blockelement, sodass Sie im entsprechenden Style Sheet das width-Attribut verwenden können. Genau genommen bewirkt float, dass nachfolgende Elemente das aktuelle umfließen, mit der Einstellung float: left rechts und mit der Einstellung float: right links.
Um die Menüleiste rechtsbündig anzuordnen, notieren Sie daher einfach float: right;. Berücksichtigen Sie aber, dass der erste Menüpunkt in diesem Fall ganz rechts erscheint. Das abschließende <div>-Element ist im Beispiel erforderlich, um den normalen Textfluss mit der CSS-Eigenschaft clear wiederherzustellen. Ansonsten würde der untere Teil der Menüleiste nicht angezeigt. Verwenden Sie den gleichen Wert, den Sie zuvor für die float-Eigenschaft verwendet haben, also zum Beispiel clear: left; korrespondierend zu float: left; (oder, um im Hinblick auf eventuelle Änderungen ganz sicher zu gehen, die Einstellung clear: both;).
.menu div {
clear: left;
}
Verschachtelte Aufzählungslisten ohne CSS-Formatierung.
Tipp 3: Unterebenen definieren
Auf diesem Weg können Sie Listen verschachteln.
Das <ul>-Tag darf keine anderen Elemente als<li> enthalten. Daher ist es notwendig, Aufzählungslisten zu verschachteln, um mehrere Navigationsebenen einzurichten. Im Beispiel besitzt der dritte Listenpunkt ein Untermenü.
<ul>
<li><a href="">Menüpunkt 1</a></li>
<li><a href="">Menüpunkt 2</a></li>
<li><a href="">Menüpunkt 3</a>
<ul>
<li><a href="">Untermenüpunkt 1</a></li>
<li><a href="">Untermenüpunkt 2</a></li>
<li><a href="">Untermenüpunkt 3</a></li>
</ul>
</li>
<li><a href="">Menüpunkt 4</a></li>
<li><a href="">Menüpunkt 5</a></li>
</ul>
Ohne weitere Formatierung stellt der Internet Explorer verschachtelte Aufzählungslisten so dar, wie Sie es in der Abbildung sehen - die Darstellung unterscheidet sich nicht wesentlich in anderen Browsern.
Horizontale Menüleiste mit mehreren Navigationsebenen.
Tipp 4: Verschachtelte Listen als Untermenüs
So ordnen Sie die Listenpunkte der ersten Ebene horizontal und die Unterpunkte vertikal an.
Um sie als Menü auszugestalten, formatieren Sie eine verschachtelte Liste genauso wie eine Liste mit nur einer Navigationsebene. Insofern Sie die Navigation auf der linken Seite vertikal platzieren möchten, bietet es sich an, die Untermenüpunkte etwas einzurücken. Verwenden Sie dazu das Stilattribut margin bzw. margin-left.
Die horizontale Anordnung einer Navigation mit Untermenüpunkten erweist sich als etwas trickreicher. Hier gilt es, die Menüpunkte der zweiten Ebene passend unterhalb denen der ersten Ebene zu platzieren, also die Menüpunkte der ersten Ebene horizontal und die der zweiten Ebene vertikal anzuordnen. Das erreichen Sie, indem Sie das float-Attribut auf die Listenpunkte der ersten Ebene anwenden und - ohne sie tatsächlich zu positionieren - diesen die Einstellung position:relative; zuweisen.
.menu li {
float: left;
position: relative;
list-style: none;
}
Dadurch verwenden Sie die Listenpunkte der ersten Ebene als Bezugspunkte für eine absolute Positionierung der Untermenüs. Es ist nämlich so, dass sich die absolute Positionierung (position: absolute;) mit den Werten für top, bottom, left, right stets an dem letzten Element, welches nicht die Voreinstellung position: static; aufweist, orientiert. Tatsächlich handelt es sich daher bei der Positionierung mit dem Wert absolute ebenfalls um eine relative Positionierung.
.menu li ul {
position: absolute;
top: 2.1em;
left: -0.3em;
}
Die Breitenangabe für die Menüleiste erfolgt im Beispiel in einem übergeordneten <div>-Element, das für die Navigation selbst ohne Bedeutung ist.
Die Angabe für <ul> interpretieren einige Browser fehlerhaft. Denken Sie auch hier daran, vor Abschluss ein weiteres, ansonsten leeres <div>-Element zu verwenden, für das Sie die clear-Eigenschaft auf left setzen.
Die Untermenüs klappen bei Mausberührung auf.
Tipp 5: Dynamische Navigation
Der Tipp zeigt Ihnen, wie Sie die Untermenüs per Rollover-Effekt ein- bzw. ausblenden.
Einen besonders schönen und platzsparenden Effekt erzielen Sie, wenn Sie die Untermenüs standardmäßig verbergen und nur beim Überfahren mit der Maus anzeigen lassen. Für aktuelle Browser müssen Sie dazu nicht einmal eine Skriptssprache bemühen. Das Ganze ist bereits mit zwei zusätzlichen Style-Sheet-Einstellungen erledigt. In der Stildefinition für die Untermenüs setzen Sie display auf none. Damit verbergen Sie diese.
.menu li ul {
display: none;
...
}
Danach ergänzen Sie den CSS-Code wie folgt:
.menu li:hover ul {
display: block;
}
Mit dem Selektor .menu li:hover ul wird die Stildefinition für den Hover-Effekt auf die geschachtelte Aufzählungsliste angewandt. Mit der Einstellung display: block; zeigen Sie diese an. Außerdem empfiehlt es sich, die Listenpunkte der zweiten Ebene gesondert zu formatieren wie mit
.menu li ul li a:hover {
background-color: red;
color: white;
}
