Hamburger menu's - Going Forward.

Het horen van verschillende meningen over hamburger menu's heeft me aan h et denken gezet. Het lieft zonder JS. Maar ja, voor de semantiek van je HTML moet het dan weer een <button> zijn.

Ik ben online onderzoek gaan doen hoe anderen dit aanpakken.

Ik ben gestuit op een online YT Tutorial van DesignCourse, die haarfijn uitleg hoe je, zonder CSS hacks en dus met semantische HTML, een functionele hamburger menu maakt zonder het gebruik van JS. (Dit kan toegevoegd worden als :popover-open pseudo selector niet ondersteund wordt, met CSS.supports)

Hoe gaat dit in zijn werk?

Je maakt een button en een nav element, met ook een button erin. Je stelt de popovertarget van de buttons gelijk aan het id van de nav. De button in de nav geef je popovertargetaction="hide".

Verder in je CSS gebruik je in de nav de pseudo selector :popover-open en geef je dit de styling die deze nodig heeft.

Uitwerking

Ik heb de tutorial nagebouwd in CodePen.