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
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.
23 Replies
Ah are you allowed to use popover and css anchor? Maybe that will simplify the css and potentially the HTML as well.
Popover is baseline, css anchor isn't. Afaik.
"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."
What does this part mean? Which elements are the "containing elements"? What do they contain? Is it the container for the whole nav, for the main link list, for the submenu, or something else?
The menu items within the submenu.
So the submenu items should grow to make their total height match the height of the main link list?
I am guessing he just want his menus to be the same height as the menu items even when adding new onces in. And then he wants some popover thing where you have submenus.
Just realized I did a dumb and shared the same image twice. One second.
So thing about that dropdown as a
ul inside a div.
If an item in that first list has no submenu, it's a minimum implicit height.
If it does have a submenu that renders shorter than the
ul, it needs to expand the width of the containing div.
?
If that submenu is taller, than it has to expand the height of the containing div as well.
That's what popover API does
MDN Web Docs
HTML popover global attribute - HTML | MDN
The popover global attribute is used to designate an element as a popover element.
Not really. Popover positions the element outside of the DOM.
Does this image show what you want or what you have?
Is there a specific reason it has to stay in the DOM?
It shows what I have, but it's not using semantic HTML. The submenus are siblings of the list elements.
OK. It looks like you want the main menu to expand to match the submenu if the submenu is taller or not change height if the submenu is shorter. Is that correct?
Yeah, that's the goal. The challenge I'm running into is that nested lists make that difficult from what I've seen thus far.
@Kingpin basically what Choo said. I'm afraid if I use popover to position it, it would be flaky.
They're still your normal html elements tho.
My recommendation is to set up a grid with two columns. The left column gets the main menu and the right column gets the submenu. Use display:contents on the li parent of the submenu to allow the submenu to behave as a child of the grid container despite being actually a grandchild.
Popover is too new to use in production.
It is 11pm my time and I finally figured it out, this was the key! Thank you! https://codepen.io/cdvillard/pen/QwyqaXv
Popover is widely baseline tho.
Ah nvm newly available.
All major browser support it, but not every browser supports "hint".