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
divI'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
liI 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- 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.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time π.
36,263Members
Resources
Was this page helpful?
