<script>
let button = document.getElementById('md');
let popover = document.getElementById('mdp');
button.addEventListener('click', toggle);
function update_position() {
const target_position = button.getBoundingClientRect();
popover.style.inset = 'unset';
popover.style.top = target_position.bottom + 'px';
popover.style.left = target_position.right - target_position.width + 'px';
}
const resizeObserver = new ResizeObserver(update_position);
resizeObserver.observe(popover);
window.addEventListener('resize', update_position);
window.addEventListener('scroll', update_position);
// Animation
function toggle() {
const is_opening = !popover.matches(':popover-open');
const translate = is_opening ? ['0 10px', '0 0'] : ['0 0', '0 10px'];
const opacity = is_opening ? [0, 1] : [1, 0];
if (is_opening) popover.showPopover();
window.requestAnimationFrame(() => {
let animation = popover.animate(
{
translate,
opacity,
},
{
duration: 300,
easing: 'ease-in-out',
fill: 'forwards',
},
);
animation.onfinish = () => {
if (!is_opening) popover.hidePopover();
};
});
}
// In Manual mode, you need to trigger keyboard events yourself
document.addEventListener('keydown', (event) => {
if (
event.key === 'Escape' &&
popover.hasAttribute('popover') &&
popover.matches(':popover-open')
) {
toggle();
}
});
</script>
<button id="md" class="menu-button"><img src="/menu.svg" /></button>
<!-- Note: Manual Mode Required -->
<div popover="manual" id="mdp" class="menu">
<ul class="menu-demo">
<li><a href="#">Settings</a></li>
<li><a href="#">My Profile</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>