CSS: Menüsteuerung

Eine einfache vertikale Roll-over Menuliste

Immer wieder ist unter CSS von Block- und Inline-Elementen die Rede. Beispiele für Blockelemente sind Tags zur Dokumentenstruktur wie <header>, <main>, <article>, <nav> und <footer> oderTags zur Textstruktur wie <h1>, <p>, <li> und <div>. Inline-Elemente befinden sich innerhalb von Blockelementen wie <a>, <b>, <img> und <span>. Inline-Elemente sind dadurch gekennzeichnet, dass sie sich in den Textfluss integrieren ohne einen Zeilenumbruch oder Absatz zu erzeugen. Mit der CSS-Eigenschaft display kann man dafür sorgen, dass sich inline-Elemente wie Blockelement und Blockelemente wie inline-Elemente verhalten. Dies kann man zur Gestaltung von Menüs ausnutzen.

1. Erstellen der Liste

Für die Navigationsleiste verwenden wir hier Links.. Diese kann man leicht über CSS formatieren. Damit die Elemente der Navigation unabhängig von anderen Verweisen formatiert werden können, wird die Liste in einen nav-Container gepackt.

<nav>

<a href="#">Milch</a>
<a href="#">Eier</a>
<a href="#">Käse</a>
<a href="#">Gemüse</a>
<a href="#">Früchte</a>

</nav>

2. Einstellen der Breite und Höhe

nav a
{
width: 10em;
height:5em;
}

3. Die einzelnen Menüpunkte erhalten eine Hintergrundfarbe, einen Außenabstand des Rahmens und Rücksetzung von Abständen zu den anderen Listenelementen

nav a
{
margin: 0.2em;
padding:0;
border: 1px solid;
text-decoration: none;
font-weight: bold;
color: gold;
background-color: darkblue;
}

4. Elemente mit display: block erzeugen eine Block-Box. Das Menüelement (der Linkverweis) nimmt den gesamten Raum ein.

nav a
{
display: block;
}

5. Bei Anwahl der Links soll der "hover-Link" und der "focus-Link" farblich markiert werden.

nav a:focus
{
background-color: firebrick;
color: gold;
}

nav a:hover
{
color: darkblue;
background-color: gold;
} 

Beispiel ansehen

Eine einfache horizontale Roll-over Menuliste

Durch Anwendung von display:inline; kann das vertikale Menü in ein horizontales umgewandelt werden. Die Angaben von Breite und Höhe werden ignoriert.

nav a
{
display: inline;
}

Alternativ lässt sich auch der Befehl display:inline-block; verwenden. Es werden inline-Elemente erzeugt, die sich aber wie Blockelemente formatieren lassen. Die Angaben von Breite und Höhe werden hier berücksichtigt.

Ein Menü mit Details und Summary

In diesem Beispiel habe ich dem summary-Punkt einige CSS-Stile hinzugefügt, um ihn anzupassen:

background-color: Hintergrundfarbe des Zusammenfassungstitels.
padding: Innenabstand des Zusammenfassungstitels.
border: Rand um den Zusammenfassungstitel.
border-radius: Abrundung des Randes, um ihn abzurunden.
transition: Übergangseffekt für einen sanften Farbwechsel beim Überfahren des Zusammenfassungstitels.
:hover: Stiländerungen, die auftreten sollen, wenn der Mauszeiger über den Zusammenfassungstitel bewegt wird.
:focus: Stiländerungen, die auftreten sollen, wenn der Zusammenfassungstitel den Fokus erhält. In diesem Fall entfernen wir die Standardumrandung.

Der Pfeil erscheint standardmäßig neben dem summary-Tag und zeigt an, ob der Inhalt des details-Elements sichtbar oder ausgeblendet ist. Das Erscheinungsbild des Pfeils kann je nach Browser unterschiedlich sein und ist normalerweise schwer direkt anzupassen. Sie können jedoch versuchen, den Pfeil zu verbergen und Ihr eigenes benutzerdefiniertes Symbol oder Styling zu erstellen. Hier ist ein Beispiel, wie Sie den Pfeil ausblenden können:

Ein dreistufiges horizontales Menü mit HTML und CSS

Dieses Beispiel erstellt ein einfaches dreistufiges Menü. Jeder Menüpunkt (<li>) kann weitere Untermenüpunkte enthalten, die bei Hover oder Klick auf den übergeordneten Menüpunkt angezeigt werden. Die CSS-Regeln sind so definiert, dass Untermenüs über position: absolute; gesteuert und standardmäßig ausgeblendet werden (display: none;). Beim Hovern über einen Menüpunkt wird das entsprechende Untermenü sichtbar (display: block;). Die Positionierung der Untermenüs erfolgt relativ zu ihren übergeordneten Menüpunkten.

Ein dreistufiges vertikales Menü mit Buttons