Navigation als details

Responsive Darstellung

Beim Verkleinern des Viewports/der Darstellung auf einem schmalen Bildschirm wird die Navigation eingeklappt. Mit Hilfe eines Media-Change-Events reagiert die Darstellung auch auf das Drehen des Displays (oder Testen der Bildschirmgröße in den Developer-Tools).

Breite Darstellung

Auf breiten Viewports sind die details ausgeklappt, die Liste inline dargestellt und die summary neben die Linkliste platziert:

nav details {
	display: flex;
}
nav summary {
	display: inline-block;
	max-width: 5em;
	font-weight: bold;
	cursor: default;
}
nav ul {
	list-style-type: none;
	display: inline-block;
	margin-left: 5em;
	position: relative;
	top: -2em;
}
nav li {
	display: inline-block;
	margin-left: auto;
}