Using &lt;details&gt; for menus and dialogs (2019)

Re:Using <details> for menus and dialogs (2019) by devadvance on Saturday April 24, 2021 @08:01PM (#26929254)

I saw several posts about using `<details>` in this way, but none that fully implemented what I was looking for. So I implemented a site navbar that uses `<details>` in two ways: for dropdowns, and for a sidebar.

A working reference implementation can be found here [1]. Additionally, I ended up using a version of this on my personal site [2]. This works on stable versions of Chrome, Edge, Firefox, and Safari.

One thing to be careful of when using `<details>` in interesting ways: accessibility. At a minimum, I encourage folks to make sure that screen readers work as expected.

[1] https://codepen.io/devadvance/pen/bGBvvWv

[2] https://github.com/devadvance/devadvance.github.io/blob/mast...

[ Parent | on HN ]

Re:Using <details> for menus and dialogs (2019) by hyeomans on Saturday April 24, 2021 @09:18PM (#26929559)

Vertical scroll doesn’t work on Firefox Daylight 33 iPhone. So I open the menu and the the submenu and I can’t see the rest of the menu

[ Parent | on HN ]

Re:Using <details> for menus and dialogs (2019) by devadvance on Saturday April 24, 2021 @09:36PM (#26929625)

If longer menus are needed, it might be necessary to manually set `overflow: scroll` and hide the scrollbar.

[ Parent | on HN ]