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 {
            padding: 10px;
            position: absolute;
            z-index: 1000;
        }
        .quick-menu-item-link {
            color: black;
        }
        .quick-menu-item {
            color: black;
            background: lightgray;
        }
        .quick-menu-item-opened > ul {
            /* background: blue; /* */
            display: block; /* Mostra il menu  aperto */
        }
        .quick-menu-item-closed > ul {
            /*background: cyan; /* */
             display: none; /* Nasconde il menu */
        }
        .quick-menu-item-active {
            background: red; /* Evidenza l'elemento attivo */
        }
    </style>

</head>


<body>

<div id="menu-content">
	<ul>
		<li class="quick-menu-item quick-menu-item-opened quick-menu-item-active">
			<div class="quick-menu-item-label">
				<a class="quick-menu-item-link" href="#tit">Title</a>
			</div>
			<ul>
			  <li class="quick-menu-item quick-menu-item-closed">
				<div class="quick-menu-item-label">
				  <a class="quick-menu-item-link" href="#cp1">Capitolo 1</a>
				</div>
			  </li>
			  <li class="quick-menu-item quick-menu-item-closed">
				<div class="quick-menu-item-label">
				  <a class="quick-menu-item-link" href="#cp2">Capitolo 2</a>
				</div>
				<ul>
				  <li class="quick-menu-item quick-menu-item-closed">
					<div class="quick-menu-item-label">
					  <a class="quick-menu-item-link" href="#cp21">Capitolo 2.1</a>
					</div>
				  </li>
				  <li class="quick-menu-item quick-menu-item-closed">
					<div class="quick-menu-item-label">
					  <a class="quick-menu-item-link" href="#cp22">Capitolo 2.2</a>
					</div>
				  </li>
				  <li class="quick-menu-item quick-menu-item-closed">
					<div class="quick-menu-item-label">
					  <a class="quick-menu-item-link" href="#cp23">Capitolo 2.3</a>
					</div>
				  </li>
				</ul>
			  <li class="quick-menu-item quick-menu-item-closed">
				<div class="quick-menu-item-label">
				  <a class="quick-menu-item-link" href="#cp3">Capitolo 3</a>
				</div>
				<ul>
				  <li class="quick-menu-item quick-menu-item-closed">
					<div class="quick-menu-item-label">
					  <a class="quick-menu-item-link" href="#cp31">Capitolo 3.1</a>
					</div>
				  </li>
				  <li class="quick-menu-item quick-menu-item-closed">
					<div class="quick-menu-item-label">
					  <a class="quick-menu-item-link" href="#cp32">Capitolo 3.2</a>
					</div>
				  </li>
				</ul>
			  </li>
			  <li class="quick-menu-item quick-menu-item-closed">
				<div class="quick-menu-item-label">
				  <a class="quick-menu-item-link" href="#cp4">Capitolo 4</a>
				</div>
			  </li>
			</ul>
		</li>
	</ul>
</div>


<script>
    // Ottieni i riferimenti agli elementi cliccabili
    var items = document.querySelectorAll(".quick-menu-item > .quick-menu-item-label > .quick-menu-item-link");

    // Aggiungi l'handler agli elementi cliccabili
    items.forEach((item) => {
                item.addEventListener('click', handler, false);
    })

    // Gestisci i click
    function handler() {
      var target = this.parentElement.parentElement; 
      items.forEach((item) => {
                      item.parentElement.parentElement.classList.remove('quick-menu-item-active');
          })
      target.classList.add('quick-menu-item-active'); 
      if (target.classList.contains('quick-menu-item-closed')) {
                  target.classList.remove('quick-menu-item-closed');
                  target.classList.add('quick-menu-item-opened'); 

              } else {
                  target.classList.remove('quick-menu-item-opened');
                  target.classList.add('quick-menu-item-closed'); 
              }
    }


/*
    const menu = document.getElementById('menu');
    const button = document.getElementById('menu-toggle');

    // Aggiungi un event listener per gestire il click sul pulsante
    item.addEventListener('click', () => {
        // Cambia la classe quick-menu-item- da opened a closed e viceversa
        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...