1. Container
2. Titel
3. Schließen-Funktion
4. Inhalte (basierend auf Menüpunkt)
5. Schließen Button

Der Overlay-Menü-Container bildet den Rahmen des jeweiligen Overlay-Menüs, welches sich mit abgedunkeltem Hintergrund über die Seite legt. Sobald das Overlay-Menü geöffnet ist, sind nur noch Aktionen in der Headerleiste oder dem Overlay-Menü anwählbar, alles andere ist nicht mehr erreich- und wahrnehmbar.

Der Container beinhaltet immer einen Titel und Schließen-Funktionen. Die weiteren Inhalte werden einzeln pro Menüpunkt definiert (siehe: jeweilige Overlay-Menü Definition). Der Titel ist als H2 definiert und ist inhaltlich identisch zu den entsprechenden Icons der Headerleiste:

• “Hauptmenü” = “Hauptmenü”
• “Suche” = “Suche”
• “Kalender” = “Kalender”
• “Meldungen” = “Meldungen”
• “(Name eingeloggte Person)” = “(Name eingeloggte Person)”
• “Hilfe” = “Hilfe”

Innerhalb des Overlay-Menü-Containers gilt das Formularraster.

Die Schließen-Funktion im oberen Bereich wird als Tertiärer-Icon-Button ohne Text mit X-Icon umgesetzt und trägt den Alternativtext “[Menü-Titel] schließen”. Die Schließen-Funktion in der Fußzeile des Overlays ist ein rechtsbündig angeordneter teritärer Button mit Icon und Text “Menü schließen”.

Der Fokus wird nach dem Schließen eines Fensters auf den Menüpunkt der Headerleiste gesetzt, mit dem zuvor das Fenster geöffnet wurde.

Beim Öffnen fährt der Container, abhängig davon, ob sich das öffnende Element auf der linken oder rechten Seite des Headers befindet, entweder von links oder rechts in den Bildschirm. Wird auf der rechten Seite ein anderes Overlay geöffnet, ohne das vorherige zu schließen, findet der Wechsel ohne Animation statt.

Ab einer Breite unter 480px (oder wenn die Overlay-Breite die Screenbreite überschreitet) wird das Overlay über die gesamte Screenbreite angezeigt.

Hierbei wird der Titel mehrzeilig, wenn der Platz nicht ausreicht.

Die Breite des Containers wird jeweils pro Menüpunkt definiert. In der Höhe füllt der Container den Bildschirm bis zur Unterkante unabhängig vom Inhalt. Sollte der Inhalt länger als der Bildschirm sein, wird der Container Scrollbar.

Siehe oben in Verhalten.

• Das Overlay wird über die Headerleiste geöffnet.
• Das vordefinierte (siehe: jeweilige Overlay Menü Definition) interaktive Elemente ist angewählt.
• Enter führt die jeweilige Aktion aus.
• Tab springt zum nächsten Interaktiven Element innerhalb des Overlays.
• Die Esc-Taste oder Ausführen des schließen Icons schließt das Overlay wieder.
• Der Tastaturfokus liegt dann wieder auf dem entsprechenden Icon der Headerleiste.

• Das Overlay wird über die Headerleiste geöffnet.
• Linksklick auf ein Element führt die jeweilige Aktion aus.
• Linksklick außerhalb des Overlays (unterhalb der Headerleiste) oder auf das Schließen-Icon schließt das Overlay wieder.
• Der Tastaturfokus liegt dann wieder auf dem entsprechenden Icon der Headerleiste.