6. Jul 2022
Lesedauer 10 Min.
Menüs ohne JavaScript
Navigationsmenüs mit CSS
Eine gute Navigation ist neben der Suche eine der zentralen Funktionen für eine erfolgreiche Website.
Bild: ESB Professional / Shutterstock
Aufgrund der unterschiedlichen Plattformen und Browser-Generationen sollten Sie Ihre Menüs, falls Sie diese selbst entwickeln möchten, so einfach als möglich gestalten – ohne auf wichtige Funktionen zu verzichten. Wir zeigen Ihnen in diesem Workshop, wie Sie mithilfe von HTML und CSS nicht nur einfache, einstufige Menüs entwickeln, sondern diese auch problemlos über mehrere Ebenen hinweg aufbauen und umsetzen.
Einfaches Aufklappen über hover-Ereignis
Das erste Beispiel ist bewusst einfach gehalten und zeigt lediglich einen Menüpunkt sowie ein Menü, das nach unten aufklappt. Der Fokus soll an dieser Stelle auf das auslösende Element sowie die Formatierung des Menüs gesetzt werden. Hierfür ist die HTML-Struktur innerhalb des body-Tags auch so einfach wie möglich gehalten – ein Menü mit zwei Menüpunkten:
<div class="dropdown">
<span>Menüpunkt</span>
<div class="dropdown-inhalt">
<p>Menüpunkt 1.1</p>
<p>Menüpunkt 1.2</p>
</div>
</div>
Das Menü besteht somit nur aus drei Textzeilen, die entsprechend über ein span-Tag und zwei Paragrafen gekennzeichnet sind. Für die Formatierung des Menüpunktes und des ausgeklappten Menüs verwenden wir die beiden Klassen dropdown und dropdown-inhalt:
.dropdown {
position: relative;
display: inline-block;
}
Die Klasse dropdown legt die Position des Menüs fest sowie die Art von Box, welche für das Menü verwendet wird. Diese Festlegungen setzen Sie entsprechend passend für die Darstellung des Menüs innerhalb Ihrer Webseite. Die eigentliche Formatierung des Menüs findet über die Klasse dropdown-inhalt statt. Dabei wird als erstes über die Eigenschaft display das Menü versteckt und über position die korrekte Anordnung festgelegt.Die Farbe ist Geschmackssache – in unserem Beispiel haben wir uns für Hellgrau entschieden. Damit die Texte innerhalb des Menüs nicht umgebrochen werden, legen Sie eine minimale Breite fest. Diese hängt von den von Ihnen gewählten Texten ab. Einen optischen Rahmen mit den passenden Abständen schaffen Sie mittels padding. Falls Sie auf Ihrer Webseite mit mehreren Ebenen arbeiten, stellen Sie mit z-index sicher, dass das Menü über den anderen Inhalten landet und nicht davon verdeckt wird:
.dropdown-inhalt {
display: none;
position: absolute;
background-color: lightgrey;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
}
Damit fehlt nur noch das auslösende Ereignis. Dieses legen Sie über die hover-Eigenschaft der dropdown-Klasse fest. In diesem Fall soll der Inhalt der Klasse display-inhalt dargestellt werden:
.dropdown:hover .dropdown-inhalt {
display: block;
}
Damit haben Sie ein erstes einfaches Menü geschaffen. Elemente daraus finden Sie in den nächsten Beispielen wieder (Bild 1).
hover-Ereignis:Die einfachste Möglichkeit, ein Menü zu gestalten, ist über das hover-Ereignis eines Textes. Die Darstellung des Untermenüs erfolgt über die Styles der Klassen(Bild 1)
Hitzig
Im ersten Beispiel war für den Besucher nicht klar ersichtlich, an welcher Stelle er ein Menü vorfindet. Diesen Mangel haben wir im zweiten Beispiel ausgeräumt und dafür einen Button verwendet. Zusätzlich haben wir noch ein wenig das Look & Feel des Menüs optimiert. Für den obersten Menüpunkt setzen wir, wie bereits erwähnt, ein button-Objekt ein. Dieses ersetzt das span-Element:
<<div class="dropdown">
<button class="dropfeld">Oberste Menüpunkt</button>
<div class="dropdown-inhalt">
<a href="#">Menüpunkt 1.1</a>
<a href="#">Menüpunkt 1.2</a>
<a href="#">Menüpunkt 1.3</a>
</div>
</div>
Im ersten Beispiel waren die Menüelemente noch nicht verlinkt. Dies haben wir im zweiten Beispiel nachgeholt und hierfür klassische Anchor-Tags verwendet. Damit sind auch im Bereich der Stylesheets einige Anpassungen notwendig. Zuallererst existiert ein neues Element an, dem Sie das gewünschte Aussehen zuweisen:
.dropfeld {
background-color: orange;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
Der Menüpunkt besitzt einen orangefarbenen Hintergrund, der beschreibende Text ist ein Weiß gehalten. Einen eigenen Rahmen haben wir nicht vorgesehen. Der Abstand des Textes zum Rand sind umlaufend 16 Pixel, ebenso die Größe der Schrift. Der Cursor wird ebenfalls angepasst, sobald sich der Cursor auf der Schaltfläche oder dem aufgeklappten Menü befindet. Hierfür verwenden wir den Finger einer Hand. Als nächstes steht noch die Formatierung der Menüelemente an. Da diese im Beispiel aus Verlinkungen bestehen, sind eine Reihe von optischen Anpassungen notwendig, die Sie über das Anchor-Tag der Klasse dropdown-inhalt festlegen:
.dropdown-inhalt a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
Die Schriftfarbe wird auf Schwarz gesetzt und mittels text-decoration die optische Verlinkung entfernt. Mit padding optimieren Sie noch die Abstände zu den Rändern. Zusätzlich haben wir noch einen weiteren optischen Effekt integriert: wenn Sie im Menü einen Punkt berühren, ändert dieser die Hintergrundfarbe. Dies erreichen Sie über das Anchor-Tag der Klasse dropdown-inhalt:
.dropdown-inhalt a:hover {
background-color: lightgrey
}
Damit haben Sie eine verbesserte Version Ihres initialen Menüs geschaffen, das sowohl optisch als auch funktional deutlich mehr bietet (Bild 2).
Optische Effekte:Damit das Menü als solches erkannt wird, hinterlegen Sie das Menü am besten mit einer Hintergrundfarbe. Der aktuell markierte Menüpunkt wird optisch hervorgehoben(Bild 2)
Hitzig
In den vorherigen Beispielen haben wir jeweils nur ein Menüpunkt zur Verfügung gehabt. Für eine vollwertige Navigation benötigen Sie sicherlich noch den einen oder anderen zusätzlichen Punkt. Diese haben wir im folgenden Beispiel in einem Menü-Band angeordnet und exemplarisch mit einem Menüpunkt ausgeprägt.Die Basis stellt bei dieser Anordnung – wie auch in den weiteren Beispielen – eine unsortierte Liste dar:
<ul>
<li><a href="#m1">Menü 1</a></li>
<li><a href="#m2">Menü 2</a></li>
<li class="dropdown">
<a href="#m3" class="dropfeld">Menü 3</a>
<div class="dropdown-inhalt">
<a href="#">Menü 3.1</a>
<a href="#">Menü 3.2</a>
<a href="#">Menü 3.3</a>
</div>
</li>
</ul>
Dabei gibt es mit Menü 1, Menü 2 und Menü 3 drei Elemente auf der obersten Ebene und unterhalb vom letzten Punkt noch drei Unterelemente. Generell sind für alle Einträge über das Anchor-Tag eine Verlinkung auf andere Inhalte vorgesehen, aber nicht weiter ausgeprägt. Im ersten Schritt entfernen wir die Aufzählungszeichen der Listenelemente sowie die Verlinkungen von den Anchor-Elementen.Das ul-Tag bekommt zusätzlich noch die Hintergrundfarbe Schwarz und wird über die komplette Breite des Browser-Fensters erweitert:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
Mit der float-Eigenschaft des Listenelements setzen Sie diese nebeneinander anstelle einer vertikalen Ausrichtung, wie sie der Standard vorsieht:
li {
float: left;
}
Den optischen Verweis auf die Verlinkungen entfernen Sie über das Anchor-Tag der List-Elemente sowie die Klasse dropfeld. An dieser Stelle passen wir zusätzlich noch die Schriftfarbe an sowie die Ausrichtung des Textes:
li a, .dropfeld {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Damit kommt das finale Aussehen des Menübandes schon recht nahe dem finalen Ziel. Sie müssen nur noch die zweite Ebene von Menü 3 ausblenden (Bild 3).
Anordnung als Menüband:Haben Sie mehrere Menüpunkte, ordnen Sie diese in einem Menüband an. Nach der ersten Formatierung wird das Untermenü von links nach rechts angeordnet(Bild 3)
Hitzig
Dies steuern Sie über die Klasse dropdown-inhalt. Das Ausblenden der Inhalte übernimmt auch an dieser Stelle wieder die Eigenschaft display, für die richtige Anordnung position sowie der z-index.
Formatierung des Menüs:Die Elemente des Menüs werden untereinander angeordnet, die Hintergrundfarbe ist hellgrau(Bild 4)
Hitzig
Als Hintergrundfarbe haben wir an dieser Stelle ein helles Grau gewählt und die Breite auf mindestens 160 Pixel festgelegt. Abhängig von Ihren Menüpunkten sollten Sie an dieser Stelle gegebenenfalls Anpassungen vornehmen (Bild 4):
.dropdown-inhalt {
display: none;
position: absolute;
background-color: lightgrey;
min-width: 160px;
z-index: 1;
}
Als nächstes sorgen wir optisch für eine Hervorhebung des aktuell berührten Menüpunktes. Dieser wird rot hinterlegt:
li a:hover, .dropdown:hover .dropfeld {
background-color: red;
}
Damit der Inhalt von Menü 3 angezeigt wird, verwenden wir die Eigenschaft display und versehen diese mit dem Wert block.
Aktiver Menüpunkt:Der aktuell markierte Menüpunkt wird mit einer roten Hintergrundfarbe kenntlich gemacht(Bild 5)
Hitzig
Damit wird das Menü erst einmal angezeigt, allerdings sehen Sie die Menüelemente nebeneinander und nicht untereinander (Bild 5):
.dropdown:hover .dropdown-inhalt {
display: block;
}
Diese erfolgt über die Klasse dropdown-inhalt in Kombination mit dem Anchor-Element. Damit wird die Anordnung der Elemente über display: block auf verschiedene Zeilen verteilt. Die restlichen Eigenschaften sorgen für die passende Darstellung, die Schriftfarbe sowie die Hintergrundfarbe:
.dropdown-inhalt a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
Die Hintergrundfarbe des Dropdown-Menüs legen Sie über dropdown-inhalt a:hover fest. In unserem Fall haben wir diese bei einem hellen Grau belassen.
Untermenü:Sie können nicht nur die Punkte des Hauptmenüs hervorheben, sondern auch die Punkte des Untermenüs – der aktive erscheint hellgrau(Bild 6)
Hitzig
An dieser Stelle bleibt Ihnen die Qual der Wahl (Bild 6):
.dropdown-inhalt a:hover {
background-color: darkgrey;
}
Im vierten Beispiel nutzen wir das HTML-Tag nav als alternativen Ansatz, über den Sie Navigationslinks zur Verfügung stellen. Als Alternative zur unsortierten Liste setzen wir in diesem Beispiel das Element menu ein. Die einzelnen Listenelemente werden jeweils durch ein menuitem repräsentiert. Der Aufbau des body-Bereichs der HTML-Seite sieht damit wie folgt aus:
<nav>
<menu>
<menuitem>
<a>Menü 1</a>
<menu>
<menuitem><a>Menü 1.1</a></menuitem>
<menuitem><a>Menü 1.2</a></menuitem>
<menuitem><a>Menü 1.3</a></menuitem>
</menu>
</menuitem>
<menuitem><a>Menü 2</a></menuitem>
</menu>
</nav>
Rufen Sie die HTML-Seite auf, erhalten Sie eine Liste der Einträge, wobei die Untermenü-Punkte in einer separaten Zeile dargestellt werden (Bild 7).
Mehrstufige Menüs:Im Beispiel wird nav, menu und menuitem zur Strukturierung der Inhalte verwendet. Zu Beginn erscheint alles wie bei einer strukturierten Liste(Bild 7)
Hitzig
Im ersten Schritt legen wir eine Grundformatierung der Elemente der HTML-Seite fest, wie Schriftart, Abstände und die Breite. Diese wird auf 100 Prozent des Viewports gesetzt:
html, body{
padding:0px;
margin:0px;
font-family: 'Arial', sans-serif;
width:100vw;
}
body * {
margin:0;
padding:0;
}
Im nächsten Schritt blenden wir alle Menüpunkte aus und anschließend das Level1-Menü wieder ein. Dies gilt für alle menuitem-Tags, die sich unterhalb des nav-Tags befinden:
nav menuitem {
position: relative;
display: block;
opacity: 0;
cursor: pointer;
}
Für die spätere Nutzung setzen wir noch die Position der Menüpunkte relativ zu ihrer normalen Position, fügen über display einen Zeilenumbruch je Element ein und geben der Maus das Aussehen einer Hand.
Auf Pointer-Ereignisse reagieren
Damit die Menüpunkte der ersten Ebene wieder sichtbar werden, bekommen diese über opacity den entsprechenden Wert zugewiesen und es soll auf alle Pointer-Ereignisse reagiert werden:
nav > menu > menuitem {
pointer-events: auto;
opacity:1;
}
Damit werden die beiden Einträge Menü 1 und Menü 2 dargestellt, allerdings untereinander (Bild 8).
Anordnung der Menüs:Zu Beginn blenden Sie erst einmal alle Menüpunkte aus, bevor Sie die der obersten Ebene wieder einblenden(Bild 8)
Hitzig
Als nächstes erhalten die Menüeinträge einen blauen Hintergrund und die Schriftfarbe wird auf weiß gesetzt. Hierfür verwenden wir die Anchor-Tags innerhalb der nav-Tags. Die Breite wird auf mindestens 190 Pixel gesetzt und mit margin und padding für die richtigen Abstände gesorgt.
Berechnung von Breite und Höhe
Damit diese Abstände in die Berechnung von Breite und Höhe des Feldes inkludiert werden, setzen wir box-sizing auf den Wert border-box. Als optischer Effekt werden die Ecken noch leicht abgerundet und die Position wieder auf relative gesetzt:
nav a {
background: blue;
color: white;
min-width: 190px;
margin: 0px 6px 6px 0px;
padding: 20px 40px;
box-sizing: border-box;
border-radius: 3px;
position: relative;
}
Damit hängen die beiden Flächen allerdings in der linken oberen Ecke des Browser-Fensters.
Formatierung der Menüpunkte:Hinterlegen Sie als erstes die Menüpunkte mit blauer Farbe, passen Sie die Schriftfarbe an und positionieren Sie die Rechtecke an der richtigen Stelle(Bild 9)
Hitzig
Für eine verbesserte optische Darstellung verschieden wir diese um 40 Pixel nach rechts und unten (Bild 9):
nav {
margin-top: 40px;
margin-left: 40px;
}
Die beiden Menüpunkte sollen jedoch auch in diesem Beispiel nebeneinanderstehen. Dazu setzen Sie die Eigenschaft display für alle menu-Tags innerhalb der nav-Tags auf flex:
nav > menu {
display:flex;
}
Da in unserem Beispiel nicht alle Menüs auf die Cursor-Ereignisse reagieren sollen, werden diese erst einmal komplett deaktiviert und die Position auf absolute gesetzt.
Vertikale Anordnung der Menüpunkte:Die Punkte des Hauptmenüs sollen nicht nebeneinander, sondern untereinander angeordnet werden(Bild 10)
Hitzig
Dies ist im späteren Verlauf für beim Aufklappen des Untermenüs wichtig (Bild 10):
nav menuitem > menu
{
position: absolute;
pointer-events: none;
}
Damit die Untermenüpunkte von Menü 1 ordentlich untereinander angeordnet werden, passen Sie für die Anchor-Tags der menuitems die beiden folgenden Eigenschaften an: mit white-space und dem Wert nowrap sorgen Sie dafür, dass der Text des Menüpunktes nicht umgebrochen wird, die Darstellung im Block-Modus sorgt für eine separate Zeile je Menüpunkt:
menu menuitem a
{
white-space: nowrap;
display: block;
}
Damit das Untermenü auch wieder sichtbar wird, ändern Sie beim hover-Ereignisses der menu-Objekte und der menuitem-Objekte die Sichtbarkeit entsprechend, indem Sie den Wert von opacity auf 1 setzen:
menuitem:hover > menu > menuitem,
menu:hover > menuitem
{
opacity:1;
}
Sobald das Menü ausklappt und Sie versuchen, einen der Untermenü-Punkte mit dem Mauszeiger zu berühren, klappt das Menü wieder ein.Dies verhindern Sie, indem Sie den Wert von pointer-events auf seinen initialen Wert zurücksetzen:
menuitem:hover > menu
{
pointer-events:initial;
}
Damit die jeweilige Kachel optisch hervorgehoben wird, legen wir noch einen Filter auf das jeweilige Feld. Hierfür nutzen wir den before-Selektor des hover-Ereignisses des Anchor-Tags:
nav a:hover:before {
content: '';
top:0;
left:0;
position: absolute;
background: rgba(0, 0, 0, 0.2);
width:100%;
height:100%;
}
Dieser wird in voller Höhe und Breite über das originale Element gelegt, die Durchlässigkeit der Farbe über die rgba-Funktion reduziert und die Positionierung über top, left und position geregelt (Bild 11).
AusgeklapptesMenü:Das Menü wird nach unten ausgeklappt. Der aktuell aktive Menüpunkt wird farblich markiert, der Mauszeiger ist angepasst(Bild 11)
Hitzig
Zum Abschluss nehmen wir noch eine optische Verbesserung vor. Damit der Besucher der Website weiß, welche Menüs ein Untermenü besitzen, wird dies entsprechend über einen Pfeil im Hauptmenü kenntlich gemacht.
Hinweis auf Untermenü:Diejenigen Menüpunkte, hinter denen sich ein Untermenü verbirgt, werden zur Hervorhebung zusätzlich mit einem Pfeil gekennzeichnet(Bild 12)
Hitzig
Dazu adressieren Sie das Objekt entsprechend und nutzen den after-Selektor für die Anzeige (Bild 12):
nav > menu > menuitem > a + menu:after{
content: '';
position: absolute;
border:10px solid transparent;
border-top: 10px solid white;
left:12px;
top: -40px;
}
In manchen Fällen ist es auch notwendig, Menüs mit mehr als zwei Ebenen aufzubauen. Hierfür verwenden wir das vorherige Beispiel als Grundlage und erweitern dieses um ein weiteres ausklappbares Menü. Dieses geht dann allerdings nicht nach unten, sondern nach rechts.
Menü mit mehr als zwei Ebenen
Das Beispiel haben für das Untermenü 1.2 eine Ebene ergänzt, für 1.3 zwei Ebenen. Diese sollen, wie zuvor, auch optisch mittels eines Pfeils gekennzeichnet werden. Hierfür erweitern wir im ersten Schritt unsere HTML-Strukturen um die entsprechenden Untermenüpunkte:
<nav>
<menu>
.....
<menuitem><a>Menü 1.2</a>
<menu>
<menuitem><a>Menü 1.2.1</a></menuitem>
<menuitem><a>Menü 1.2.2</a></menuitem>
<menuitem><a>Menü 1.2.3</a></menuitem>
</menu>
</menuitem>
<menuitem><a>Menü 1.3</a>
<menu>
<menuitem><a>Menü 1.3.1</a></menuitem>
<menuitem><a>Menü 1.3.2</a>
<menu>
<menuitem><a>Menü 1.3.2.1</a></menuitem>
<menuitem><a>Menü 1.3.2.2</a></menuitem>
<menuitem><a>Menü 1.3.2.3</a></menuitem>
</menu>
</menuitem>
<menuitem><a>Menü 1.3.3</a></menuitem>
</menu>
</menuitem>
</menu>
…
</nav>
Rufen Sie die Webseite auf, erscheinen die Untermenüs allerdings noch nicht rechts neben dem aufrufenden Menü, sondern unterhalb (Bild 13).
Mehrstufige Menüs:Im erweiterten Beispiel gibt es Untermenüs der zweiten und dritten Stufe. Ohne Formatierung werden diese erst einmal nach unten ausgeklappt(Bild 13)
Hitzig
Dieser Umstand lässt sich einfach beheben, indem Sie bei den entsprechenden Untermenüs die Positionierung anpassen: Verschieben Sie das Objekt erst einmal um seine komplette Länge an der x-Achse entlang und positionieren Sie es dann entsprechend über top und right exakt:
nav > menu > menuitem menuitem menu {
transform:translateX(100%);
top:0;
right:0;
}
Damit werden die Untermenüs bereits alle an der korrekten Position angeordnet (Bild 14).
Ordentlich ausgeklappt:Nachdem Sie die Menüs neu angeordnet haben, werden die Untermenüs automatisch rechts vom aufrufenden Punkt angeordnet und ausgeklappt(Bild 14)
Hitzig
Es fehlen allerdings im Vergleich zu den vorherigen Menüs noch einige Kennzeichen, wie etwa die Pfeile, die auf die Untermenüs hinweisen. Nehmen Sie die Auswahl wie in den vorherigen Beispielen über den Kindselektor vor und verknüpfen diese mit dem after-Selektor:
nav menuitem > menu > menuitem > a + menu:after{
content: '';
position: absolute;
border:10px solid transparent;
border-left: 10px solid white;
top: 20px;
left: -180px;
}
Grundsätzlich ist die Gestaltung der Navigation hier erledigt. Sie können sie jedoch noch um einige optische Faktoren erweitern, wie etwa eine einfache Animation, um die erste Untermenü-Ebene von unten einschweben zu lassen:
nav > menu > menuitem > menu > menuitem{
transition: transform 0.6s, opacity 0.6s;
transform:translateY(150%);
opacity:0; }
nav > menu > menuitem:hover > menu > menuitem,
nav > menu > menuitem.hover > menu > menuitem{
transform:translateY(0%);
opacity: 1;
}
Die Dauer des Effektes können sie über die transform-Eigenschaft beeinflussen. Je länger Sie die Zeitdauer wählen, desto sanfter wirkt die Bewegung. Allerdings sollten Sie diese nicht länger als eine Sekunde machen, sonst wirkt es eher störend. Den gleichen Effekt können Sie auch für die Elemente ab der zweiten Untermenü-Ebene noch abbilden, wobei diese dann von der rechten Seite aus sich auf den Rest des Menüs zubewegen:
menuitem > menu > menuitem > menu > menuitem{
transition: transform 0.8s, opacity 0.8s;
transform: translateX(145px) translateY(0%);
opacity: 0;
}
menuitem > menu > menuitem:hover > menu > menuitem,
menuitem > menu > menuitem.hover > menu > menuitem{
transform: translateX(0) translateY(0%);
opacity: 1;
}
Damit sind wir auch mit bei diesem Menü am Ende angekommen (Bild 15).
Hinweis auf Untermenüs:Auch bei mehrstufigen Menüs können Sie die Benutzer mittels Pfeilen auf die vorhandenen Untermenüs hinweisen(Bild 15)
Hitzig
Wie Sie in den vorangegangenen Beispielen gesehen haben, gibt es alternative Ansätze, wie Sie zum einen die Menüs innerhalb Ihres HTML-Body aufbauen, als auch im Nachgang darauf zugreifen, die Menüs anordnen und mit den gewünschten Effekten versehen. Die einzelnen Vorgehensweisen sind sehr flexibel. Es dürfte für Sie somit ein Leichtes sein, die Menüstrukturen nach Ihren Wünschen anzupassen und in Ihre Website zu integrieren.
