Untitled

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Esempio di Menu</title>
    <style>
        /* Stile per il menu */
        .menu {
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            position: absolute;
            z-index: 1000;
        }
        .quick-menu-item-opened {
            display: block; /* Mostra il menu  aperto */
        }
        .quick-menu-item-closed {
            display: none; /* Nasconde il menu */
        }
        .menu-button {
            cursor: pointer;
            padding: 10px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
        }
        .menu-button.open {
            background: green; /* Cambia il colore del pulsante quando il menu è aperto */
        }
    </style>
</head>
<body>
<div>inzio</div>
<button class="menu-button" id="menu-toggle">Apri Menu</button>
<div class="menu quick-menu-item-closed" id="menu">
    <p>Elemento 1</p>
    <p>Elemento 2</p>
    <p>Elemento 3</p>
</div>
<div>fine</div>

<script>
    // Ottieni i riferimenti agli elementi
    const menu = document.getElementById('menu');
    const button = document.getElementById('menu-toggle');

    // Aggiungi un event listener per gestire il click sul pulsante
    button.addEventListener('click', () => {
        // Toglia la classe 'open' al menu quando il pulsante viene cliccato
        if (menu.classList.contains('quick-menu-item-closed')) {
            menu.classList.remove('quick-menu-item-closed');
            menu.classList.add('quick-menu-item-opened'); 
            button.classList.add('open'); 
        } else {
            menu.classList.remove('quick-menu-item-opened');
            menu.classList.add('quick-menu-item-closed'); 
            button.classList.remove('open'); 
        }
    });

    // Chiudi il menu se clicchi al di fuori di esso
    window.addEventListener('click', (event) => {
        if (!menu.contains(event.target) && event.target !== button) {
          if (menu.classList.contains('quick-menu-item-opened')) {
            menu.classList.remove('quick-menu-item-opened');
            menu.classList.add('quick-menu-item-closed'); 
            button.classList.remove('open'); 
          }
        }
    });
</script>

</body>
</html>
Editor is loading...