Menus Using Popover
An exploration of menus created with popover
A Basic Popover
Here is a basic popover. You can use these anytime you need something that overlays. Think a three dot menu, a login / user menu or settings of any kind.
So what’s the difference between popover and dialog? 1. Popover doesn’t inflict inert onto your page. 2. Dialog can be on toplayer or not, Popover is on toplayer.
Popover Actions
You can do a lot with just html here if all you need is basic show and hide. It’s only once we get into positioning & animations does this get a bit trickier.
Menu w/ Compatible Anchor
Let’s say I wanted everything above, but using only shippable features.
Menu w/ Anchor Positioning
Here’s where things get interesting. This uses a few crazy new APIs, popover, anchor, @starting-style, allow-discrete. Basically a who’s who of unsupported cool stuff. On top of that anchor is still greatly in flux.
Disclaimer - This demo may or may not work. 🤷‍♂️
Side note - Anchor Positioning
Anchor positioning is a fix for elements placed in the top-layer where relative context doesn’t exist. This is how you pin a menu to a location. It’s great, but not only does support suck, the API itself is not agreed upon and still in flux. See: Anchor Position Issues
Can I use anchor positioning? - âť” Big No 48% support
But wait?! Is there a Polyfill?
There is, Anchor Polyfill but, it’s not currently current to the spec, and the spec isn’t final, so hold off for now.