Menu contextuel

<style>
.bn-context-demo {
  position: relative;
  padding: 3rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-context-trigger {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(230, 228, 221, 0.2);
  background: none;
  color: #E6E4DD;
  font-size: 1.1rem;
  cursor: pointer;
}

.bn-context-trigger:hover {
  border-color: #E6E4DD;
}

.bn-context-menu {
  position: absolute;
  top: 5.5rem;
  left: 3rem;

  min-width: 200px;
  margin: 0;
  padding: 0.5rem;
  list-style: none;

  background: #050808;
  border: 1px solid rgba(230, 228, 221, 0.12);
  border-radius: 8px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Ouvert par script.js via cette classe */
.bn-context-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bn-context-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 5px;
  color: #C7C1B7;
  text-decoration: none;
  font-size: 0.85rem;
}

.bn-context-menu a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #E6E4DD;
}

.bn-context-menu__danger {
  color: #E5484D !important;
}

</style>

<div class="bn-context-demo" data-fx-root>
  <button type="button" class="bn-context-trigger" aria-label="Ouvrir le menu" aria-haspopup="true">⋮</button>

  <ul class="bn-context-menu" role="menu">
    <li role="menuitem"><a href="#">📁 Ouvrir</a></li>
    <li role="menuitem"><a href="#">★ Ajouter aux favoris</a></li>
    <li role="menuitem"><a href="#">↗ Partager</a></li>
    <li role="menuitem"><a href="#">⧉ Dupliquer</a></li>
    <li role="menuitem"><a href="#">i Détails</a></li>
    <li role="menuitem"><a href="#" class="bn-context-menu__danger">🗑 Supprimer</a></li>
  </ul>
</div>


<script>
/* ==========================================================
   MENU CONTEXTUEL
   Le bouton "⋮" ouvre/ferme le menu. Il se ferme aussi si on
   clique n'importe où ailleurs, ou si on appuie sur Échap —
   comportement standard attendu pour ce type de menu.
   ========================================================== */

(function () {
  const root = document.querySelector('.bn-context-demo[data-fx-root]');
  if (!root) return;

  const trigger = root.querySelector('.bn-context-trigger');
  const menu = root.querySelector('.bn-context-menu');

  function closeMenu() {
    menu.classList.remove('is-open');
  }

  trigger.addEventListener('click', (event) => {
    event.stopPropagation();
    menu.classList.toggle('is-open');
  });

  document.addEventListener('click', (event) => {
    if (!root.contains(event.target)) closeMenu();
  });

  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') closeMenu();
  });
})();

</script>