Drop Down Menü mit den HTML Elementen summary & details

weitere Navigationen

zum HTML Tipp Interaktiv

Seit HTML5 gibt es die Möglichkeit mit summary und details etwas Aufklappbares zu definieren.

HTML

<details>
<summary>Tiere</summary>
<ul><li><a href="hahn.html">Hahn</a></li></ul>
</details>

Es wird zuerst nur das summary mit einem Pfeil angezeigt. Der Rest erscheint nach dem Anklicken.

CSS

Mit speziellen Selektoren (marker, open) kann man die Art der Pfeile bestimmen.

details {
    font-size: 1.5rem;
}
summary {
    cursor: pointer;
}
details summary::marker {
content: " 🡺 ";
}
details[open] summary::marker {
content:  " 🡻 ";
}