OHA Software

Individuelle Weblösungen.
Durchdacht bis ins Detail.

Projekt anfragen
Menü
StartseiteCSS-Menü-Spielwiese

Die OHA-Spielwiese

Webtechnik sehen.
Selbst ausprobieren.

Hier werden Webtechniken an kleinen, bedienbaren Beispielen sichtbar. Den Anfang machen vier Menüs, deren Darstellung und Interaktion mit HTML und CSS funktionieren.

Alle Demos im Überblick CSS-Menüs entdecken

01 / Navigation

Vier Wege zum CSS-Menü.

Vergleichen Sie Maus, Tastatur und Touch. Verkleinern Sie das Browserfenster, um die mobile Darstellung zu sehen. Alle vier Beispiele funktionieren auch bei ausgeschaltetem JavaScript.

Ausgangspunkt für die ersten drei Beispiele ist der Dr.-Web-Artikel zur responsiven CSS-Navigation. Das Radialmenü ergänzt eine weitere Anordnung.

Beispiel 01 Hover & Fokus

Ein klassisches Dropdown

Bewegen Sie die Maus über „Leistungen“ oder erreichen Sie den Link mit Tab. Mit einem weiteren Tab gelangen Sie in das Untermenü. Sobald Maus und Fokus den Bereich verlassen, schließt es sich.

Ein Menüpunkt führt zu seinem Beispielinhalt.

Start Willkommen im ersten Menü-Beispiel.

Leistungen Der übergeordnete Link hat ein eigenes Ziel.

Webdesign Dieses Ziel erreichen Sie über das Dropdown.

Entwicklung Auch der zweite Unterpunkt ist per Tab erreichbar.

Kontakt Ein gewöhnlicher Navigationslink.

Das Prinzip: :focus-within hält das Dropdown offen, solange ein Link darin den Fokus hat. :hover ergänzt die Mausbedienung auf Geräten mit geeignetem Zeiger.

Die Grenze: Dies ist eine Demonstration des Fokus-Verhaltens. Es gibt keinen Auf-/Zu-Schalter und kein Schließen per Escape. Für Touch eignet sich die dritte Variante besser.

CSS-Prinzip ansehen 
.css-menu__submenu {
  display: none;
}

.css-menu__item--dropdown:focus-within > .css-menu__submenu {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .css-menu__item--dropdown:hover > .css-menu__submenu {
    display: block;
  }
}

Beispiel 02 Checkbox & :checked

Ein responsives Burger-Menü

Auf schmalen Bildschirmen schaltet „Menü anzeigen“ die Navigation um. Per Tastatur: Tab zum Schalter, Leertaste zum Öffnen und Schließen. Ab 48rem steht die Linkliste dauerhaft nebeneinander.

Auf dem Smartphone zuerst das Menü öffnen.

Start Die Navigation funktioniert mit einem nativen Formularschalter.

Projekte Die Links werden mit CSS ein- und ausgeblendet.

Team Auf breiten Bildschirmen ist kein Schalter nötig.

Kontakt Das mobile Menü bleibt offen, bis Sie den Schalter erneut betätigen.

Das Prinzip: :checked und der Geschwisterselektor ~ steuern die Linkliste. Die Checkbox bleibt auf Mobilgeräten sichtbar und bedienbar.

Die Grenze: Hilfsmittel melden eine Checkbox mit ihrem Auswahlzustand. Für eine Navigation mit nativem Aufklappzustand ist details die passendere Grundlage.

CSS-Prinzip ansehen 
.css-menu--checkbox > .css-menu__list {
  display: none;
}

.css-menu__toggle:checked ~ .css-menu__list {
  display: flex;
}

@media (min-width: 48rem) {
  .css-menu--checkbox > .css-menu__list {
    display: flex;
    flex-direction: row;
  }
  .css-menu__toggle,
  .css-menu__toggle-label {
    display: none;
  }
}

Beispiel 03 Details & Summary

Ein Menü mit nativen Schaltern

Öffnen Sie „Navigation“, dann „Leistungen“ und darin „Webentwicklung“. Klicken, Tippen, Enter und Leertaste schalten die jeweilige Ebene um. Das gleiche Verhalten gilt auf Smartphone und Desktop.

Drei Ebenen, einzeln auf- und zuklappbar.

Start Der Browser verwaltet die geöffneten Ebenen.

Gestaltung Ein Link auf der zweiten Ebene.

Frontend Sie haben die dritte Menüebene erreicht.

Backend Auch verschachtelte Schalter funktionieren ohne Skript.

Kontakt Links und Aufklappschalter haben getrennte Aufgaben.

Das Prinzip: summary ist der native Schalter. Der Browser setzt open und gibt den Aufklappzustand an Hilfsmittel weiter. CSS dreht den Pfeil passend zum Zustand.

Zum Vergleichen: Die Ebenen bleiben nach einer Linkauswahl offen. Automatisches Schließen bei Außenklick oder per Escape müsste zusätzlich programmiert werden.

HTML- und CSS-Prinzip ansehen 
<details class="css-menu__disclosure">
  <summary>Leistungen</summary>
  <ul>
    <li><a href="#details-gestaltung">Gestaltung</a></li>
  </ul>
</details>

.css-menu__disclosure[open] > summary .css-menu__chevron {
  transform: rotate(180deg);
}

Beispiel 04 Radialmenü & CSS-Animation

Vier Links um einen Mittelpunkt

Öffnen Sie den runden Schalter „Menü“. Die Links erscheinen im Uhrzeigersinn um die Mitte. Per Tastatur öffnen Sie mit Enter oder Leertaste und wechseln mit Tab durch die vier Ziele.

Einmal auf die Mitte klicken oder tippen, um die Ziele zu sehen.

Design Das erste Ziel liegt oberhalb des zentralen Schalters.

Code Das zweite Ziel liegt rechts. Die Tab-Reihenfolge folgt dem Uhrzeigersinn.

Daten Das dritte Ziel liegt unterhalb der Mitte.

Schutz Das vierte Ziel links schließt den Kreis.

Das Prinzip: details verwaltet den Aufklappzustand. Prozentuale Positionen ordnen die Links rund um den Mittelpunkt an; translate(-50%, -50%) zentriert jedes Element an seiner Position. Eine kurze CSS-Animation blendet die Ziele ein.

Für kleine Ansichten: Bei sehr wenig Platz, etwa mit stark vergrößerter Schrift, wird der Kreis zur Linkliste. Die Einstellung für reduzierte Bewegung schaltet die Animation aus. Das Menü bleibt nach einer Auswahl offen und lässt sich über die Mitte wieder schließen.

HTML- und CSS-Prinzip ansehen 
<details class="radial-menu">
  <summary class="radial-menu__toggle">Menü</summary>
  <ul class="radial-menu__items">
    <li class="radial-menu__item radial-menu__item--top">
      <a href="#radial-design">Design</a>
    </li>
    <!-- Weitere Links rechts, unten und links -->
  </ul>
</details>

.radial-menu__item {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}
.radial-menu__item--top { inset-block-start: 18%; }
.radial-menu__item--right { inset-inline-start: 82%; }
.radial-menu__item--bottom { inset-block-start: 82%; }
.radial-menu__item--left { inset-inline-start: 18%; }