Votre navigateur ne supporte pas cette démonstration
Si la démonstration ne fonctionne pas, activez la fonctionnalité : #enable-experimental-web-platform-features via le drapeau chrome://flags.
Cliquez sur le bouton en haut à droite de la page.
<div class="demo">
<button id="menu-demo" popovertarget="liste-menu">
<svg viewBox="0 0 24 24">
...
</svg>
</button>
</div>
<div id="liste-menu" class="popover" popover anchor="menu-demo">
<ul role=menu>
<li>Lorem ipsum</li>
...
</ul>
</div>
.popover {
background-color: #e3e3e3;
padding: 1rem;
width:100%;
max-width: 320px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
}
[popover] {
border:unset;/*reset*/
top: calc(anchor(bottom) + .5rem);
right: calc(anchor(right));
scale:calc(1 - var(--a));/* 1 - 1 = 0*/
opacity: calc(1 - var(--a));/* 1 - 1 = 0*/
transform-origin:top right;
}
@starting-style {
[popover] {
--a: 1;/*initialise*/
}
}
@media(prefers-reduced-motion: no-preference) {
[popover] { transition: all .4s; }
}
.demo {
position:absolute;
right: 1rem;
top: 1rem;
}
.demo button {
border:none;
cursor: pointer;
border-radius: 50%;
height: 4rem;
aspect-ratio: 1;
display: flex;
align-items:center;
justify-content: center;
background-color: #fff;
}
.demo svg {
fill:#555;
height: 2rem;
width: 2rem
}
ul{
list-style-type: none;
padding:0;
margin:0
}
.separateur {
border-bottom: 1px solid #ccc ;
margin: 5px 0;
}