Anspruchsvollere Menüs zaubern

CSS-Eigenschaft float

  1. Navigation mit CSS
  2. CSS-Eigenschaft float

Die Attributwerte für border-left-color und border-top-color überschreiben hier die zuvor für alle Ränder definierte schwarze Farbe. Natürlich steht es Ihnen frei, die Farbwerte jeweils einzeln zu setzen wie mit der Syntax für die Attribute border-topcolor und border-right-color. Bewährt hat es sich auch, den Verknüpfungstext mittig zu setzen, was Sie mit der Einstellung textalign: center; erreichen.

Horizontale Menüleisten

image.jpg

© Walter Saumweber, Daniela Schrank

Im Firefox-Browser: horizontale Menüleiste mit mehreren Navigationsebenen.

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;
...
}

CSS-Eigenschaft float

Alternativ zu der 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 sicherzugehen, die Einstellung clear: both;).

.menu div {
clear: left;
}

Unterebenen definieren

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&uuml;punkt&nbsp;1</a></li><li><a href="">Men&uuml;
punkt&nbsp;2</a></li><li><a href="">Men&uuml;
punkt&nbsp;3</a><ul><li><a href="">Untermen&uuml;
punkt 1</a></li><li><a href="">Untermen&uuml;
punkt 2</a></li><li><a href="">Untermen&uuml;
punkt 3</a></li></ul></li><li><a href="">Men&uuml;
punkt&nbsp;4</a></li><li><a href="">Men&uuml;
punkt&nbsp;5</a></li></ul>

Verschachtelte Listen als Untermenüs

image.jpg

© Walter Saumweber, Daniela Schrank

Verschachtelte Aufzählungslisten ohne CSS-Formatierung.

Um sie als Menü auszugestalten, formatieren Sie eine verschachtelte Liste genauso wie eine Liste mit nur einer Navigationsebene. Sofern 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 beziehungsweise 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.

Dynamische Navigation

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 wiefolgt:

.menu li:hover ul {
display: block;
}

Mit dem Selektor .menu li:hover ul wird nun 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;
}

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".