Gunnar Bittersmann: Kontextmenü

Beitrag lesen

@@Matthias Scharwies

<nav id="context" class="inactive">
	<button id="features">Eigenschaften</button>
	<button id="send">Senden</button>
	<button id="move">Verschieben</button>
	<button id="erase">Löschen</button>
	<button id="mark">Markieren</button>
</nav>

Ich habe ein nav-Element verwendet

nav ist falsch: “The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.” [Spec]

Buttons für Aktionen auf der Seite sind keine Navigation.

Da du wohl eher Aktionen ausführst, als auf andere Seiten zu verweisen, habe ich statt des a- ein button-Element verwendet.

button ist richtig. a ohne sinnvolles href (z.B. wie hier href="#") ist falsch.

Diese ändert die Klasse des Menüs von inactive auf active, sodass es sichtbar wird.

Wozu Klassen? (Noch dazu zwei davon?) Dafür gibt es das hidden-Attribut, was anstelle der Klassen zu verwenden ist.

Dann funktioniert die Steuerung der Sichtbarkeit sogar ohne CSS.

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory