Positioning nested content inline with its parent
I have been absolutely flummoxed with an accessibility issue of late, and I need all the help I can get to figure out how to solve it.
The screenshot I attached shows a menu that renders when the hamburger menu icon above it is clicked. When one of the buttons on the left are hovered over, if they don't have an associate submenu list, the button is just highlighted. My issue comes in when they do have a submenu, like in the first image.
The pattern provided by my designers asks that, if a link associated with a submenu is hovered, render the submenu. If the submenu is taller than the main link list, it should force the height of the containing elements to grow. Otherwise, the containing markup should render at the minimum height of the main link list, regardless of a submenu being shown.
I achieved this by rendering the submenus as
I'd love to make this work with semantic HTML like an unordered list, but the catch is that the submenus would need to then be nested in
I think it's pretty clear one can't simply use positioning because it takes the submenu's out of the DOM, thus not affecting the parent container. I'm exploring the use of
- Show the list in semantic HTML, but then
- Render nested elements when its parent is hovered, while
- Not changing the height of the parents, but
- Rendering the list to its right while expanding any containing markup implicitly.
Any help or insight into this would be helpful. I'm playing around with some ideas that involve abusing pseudo-elements at this point. Happy to get on a chat or record an explainer video if that helps.
The screenshot I attached shows a menu that renders when the hamburger menu icon above it is clicked. When one of the buttons on the left are hovered over, if they don't have an associate submenu list, the button is just highlighted. My issue comes in when they do have a submenu, like in the first image.
The pattern provided by my designers asks that, if a link associated with a submenu is hovered, render the submenu. If the submenu is taller than the main link list, it should force the height of the containing elements to grow. Otherwise, the containing markup should render at the minimum height of the main link list, regardless of a submenu being shown.
I achieved this by rendering the submenus as
div elements sibling to the main links. By setting the container as a grid and hiding the submenus, I can change the columns of the grid when a submenu is shown on interaction and move the submenu over. While it achieves the visual, it doesn't make for good accessibility practices, imo. We tried throwing JS at it, but it's not working.I'd love to make this work with semantic HTML like an unordered list, but the catch is that the submenus would need to then be nested in
li elements, and that's where my challenge lies.I think it's pretty clear one can't simply use positioning because it takes the submenu's out of the DOM, thus not affecting the parent container. I'm exploring the use of
display: contents and position anchoring, but I don't think they quite solve the problem. What I need is a way to:- Show the list in semantic HTML, but then
- Render nested elements when its parent is hovered, while
- Not changing the height of the parents, but
- Rendering the list to its right while expanding any containing markup implicitly.
Any help or insight into this would be helpful. I'm playing around with some ideas that involve abusing pseudo-elements at this point. Happy to get on a chat or record an explainer video if that helps.
