Das Konzept und die Funktionsweise sind sehr unterschiedlich. Bei der Touchgeräte werden nur Klicks und Tastatur-Eingabe in Elementen wie Input, Links und Schaltelementen weitergereicht. Das Fokus wird nicht immer behandelt.
Auf Rechner werden die Tastatur und Mauseingabe den Browser, gegebenenfalls nach Vorverarbeitung weitergereicht.
Die Unterschieden erlauben, auf Smartphone oder Tabletten kein saubere Reaktion der GUI, manche Events fehlen.
<nav>
<details>
<summary aria-label="Hauptmenü" id="menu-top">Menü;</summary>
<ul>
<li><a href='.' >HOME</a></li>
<li>
<details><summary">Navigation</summary>
<ul>
<li><a href="./?1">Seite 1</a></li>
<li>
<details><summary>Seite 3.X</summary>
<ul>
<li><a href="./?3,1">Seite 3.1</a></li>
</ul>
</li>
<li>
<details><summary>Aktion</summary>
<ul>
<li><button id='action' aria-label="Hell/Dunkel"
type="submit">Ausführen</button></li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</details>
</nav>Das Menü kann unterschiedlichen Untermenü Ebenen besitzen. Jede Ebene kann ohne Javascript aus- oder ein geklappt werden.
Für den ausreichend sehenden ist es leider nicht so komfortable, das Schließen einer Ebene bedarf immer einer Handlung.
Dies kann mit wenig Javascript verbessert werden. Klicks außerhalb des Menüs oder Tastatur-Kursor Veränderungen müssen das gesamte Menü oder Untermenü automatisch schließen.
Als Events eignen sich die Events Focusout, keydown und Click. Die Aktion für Focusout muss allerdings erst nach dem Ausführen der von den anderen Events erfolgen, sonst kann nicht gezielt die entsprechenden Parent Elemente behandelt werden. Dies geht einfach, durch Aufruf der entsprechende Funktion mittels:
function focusOut(e) { setTimeout(toogleDetails, 1); }Diese Funktion wird, sobald, einen der Navigationselemente der Fokus verliert durch einem passenden EventListener aufgerufen. Dies wird erreicht durch:
document.querySelectorAll('nav summary, nav a, nav button').forEach(a => {
a.addEventListener('focusout', focusOut);});Falls das Menü durch ein Kursor-Taste verlassen wird, muss es erkannt werden. Ein einfacher Weg, ist das Abfangen des keyup Events auf Body Ebene und zu prüfen ob das Ursprung Element ein Kind des Navigationsbereiches ist. Klick Events können ebenso ausgewertet werden.
In unserem Script werden die Events click (Mausbedienung) und keyup ausgewertet.
Da viele Events, vom Browser auf Touchgeräte nicht empfangen werden, entspricht die Bildschirmdarstellung nich unbedingt das Erwartete,
var allDetails = null;
function closeAll() {allDetails.forEach( det => { det.open = false;});}
window.addEventListener('DOMContentLoaded',function() {
var menu = null; var navi = null;
function closeOnlyOpen() {
allDetails.forEach( det => {
if ( !det.contains(document.activeElement) ) det.open = false;})}
function toogleDetails() {
if ( document.activeElement ) closeOnlyOpen(document.activeElement);
else closeAll();}
function outHandler(e) {
if ( navi.contains(e.target) && e.key == 'Escape') {
e.preventDefault(); closeAll(); menu.focus();
} else if ( !navi.contains(e.target) ) closeAll();}
allDetails = document.querySelectorAll('nav details');
menu = document.querySelector('#menu-top');
navi = document.querySelector('nav');
document.querySelector('body').addEventListener('keyup', outHandler);
document.querySelector('body').addEventListener('click', function (e) {
if ( !navi.contains(e.target)) closeAll();
else closeOnlyOpen();
});})Hamburger Menüs werden auf Smartphone und auf einige Webseiten verwendet
Für Smartphone haben sich Hamburger Menüs bewährt. Das Menü Eintrittspunkt besteht aus ein Symbol bestehend aus drei, vertikal ausgerichtet, horizontale Strich.
Solch ein Symbol kann leicht realisiert werden
CSS:
summary svg {
width:1em;
height:1em;
vertical-align:middle;
stroke: #00a;
}HTML:
<summary>
<svg viewBox="0 0 100 100" width="16" height="16">
<line x1="5" y1="85" x2="95" y2="85" stroke-width="10" />
<line x1="5" y1="50" x2="95" y2="50" stroke-width="10" />
<line x1="5" y1="15" x2="95" y2="15" stroke-width="10" />
</svg>
</summary>Die Svg Beschreibungssprache ist XML, deswegen müssen in sich geschlossene Elementen, hier <line /> entsprechend beendet werden.
Ein Arial Label für das Summary Element ist imperativ.