Menu contextuel en verre
Appuie sur la photo et un menu en verre s'ouvre avec un ressort pendant que l'image rétrécit et que le fond se floute.
Réglages
Code
<div class="uv-gcm"><button type="button" class="ph" aria-haspopup="menu" aria-expanded="false"><span class="im"></span><span class="cp">Coucher de soleil à Cadix</span></button><div class="mn" role="menu"><button type="button" role="menuitem" style="--i:0"><span>Copier</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2.5"/><path d="M16 8V5.5A1.5 1.5 0 0 0 14.5 4h-9A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16H8"/></svg></button><button type="button" role="menuitem" style="--i:1"><span>Partager</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15V3.5M7.5 8L12 3.5 16.5 8M5 12v6.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V12"/></svg></button><button type="button" role="menuitem" style="--i:2"><span>Favori</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button><button type="button" role="menuitem" class="dg" style="--i:3"><span>Supprimer</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 12.5h9l1-12.5"/></svg></button></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Les menus d'appui long et de clic droit sont l'endroit où le verre brille le plus, flottant au-dessus du contenu concerné. Un clic, un clic droit ou un appui sur la carte photo la réduit légèrement, assombrit et floute le fond et ouvre depuis le coin un menu dépoli avec copier, partager, favori et supprimer en rouge, chaque option apparaissant en cascade.
C'est un vrai menu avec des menuitems : le focus y entre à l'ouverture et Échap le ferme en rendant le focus à la photo. Règle le flou et la teinte selon ton fond et remplace le dégradé par n'importe quelle photo.