<button popovertarget="demo-mobile-nav">NAV</button>
<nav popover id="demo-mobile-nav">
<button class="demo-button" popovertarget="demo-mobile-nav" popovertargetaction="hide">
Close Nav
</button>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<style>
#demo-mobile-nav[popover] {
transition:
display 0.3s allow-discrete,
overlay 0.5s allow-discrete,
opacity 0.3s,
translate 0.3s;
transition-timing-function: ease-in;
translate: 100%;
margin: 0;
block-size: 100vb;
inline-size: 90vi;
inset-inline-start: unset;
inset-inline-end: 0;
&:popover-open {
translate: 0;
transition-timing-function: ease-out;
}
@starting-style {
&:popover-open {
translate: 100%;
}
}
}
</style>