Vai al contenuto
Italia daisy
Storybook
Tema
  • Italia
  • daisyUI

Componente

Megamenu

Il pannello largo della navigazione principale: colonne di link, blocco descrittivo, link di sezione e call to action. Un <details> dentro daisyUI dropdown, quindi funziona con la tastiera e senza JavaScript.

Riferimento
<it-megamenu>
Classi
ita-megamenuita-megamenu-fullita-megamenu-gridita-megamenu-sideita-megamenu-mainita-megamenu-headerita-megamenu-listita-megamenu-cols-1ita-megamenu-cols-3ita-megamenu-cols-4ita-megamenu-footerita-megamenu-footer-endita-megamenu-footer-sideita-megamenu-itemita-megamenu-activeita-megamenu-disabled
Basato su (daisyUI)
menumenu-horizontal
Solo CSS
daisyUI ha una classe megamenu basata su popover e anchor positioning: qui non è usata perché l'anchor positioning non è ancora supportato fuori da Chromium. Il pannello è largo min(56rem, 100vw - 2rem) invece di essere ancorato dinamicamente.
Storybook
Apri le storie di Megamenu

Megamenu base

Mostra il codice HTML
<div class="bg-primary text-primary-content">
  <nav aria-label="Navigazione principale" class="mx-auto w-full max-w-[1320px] px-4">
    <ul class="menu menu-horizontal w-full gap-0 p-0">
      <li><details class="ita-megamenu-item">
  <summary>Megamenu</summary>
  <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-main">
        
        <ul class="ita-megamenu-list">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
        </ul>
      </div>
      </div>
    </div>
</details></li>
    </ul>
  </nav>
</div>
<div class="h-96"></div>

Megamenu completo

Descrizione a sinistra e link di sezione sopra le colonne.

Mostra il codice HTML
<div class="bg-primary text-primary-content">
  <nav aria-label="Navigazione principale" class="mx-auto w-full max-w-[1320px] px-4">
    <ul class="menu menu-horizontal w-full gap-0 p-0">
      <li><details class="ita-megamenu-item">
  <summary>Megamenu</summary>
  <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-side">
        <div><img src="https://picsum.photos/seed/megamenu/560/240" alt="Segnaposto" loading="lazy"></div>
        <p>Testo utile a fornire una descrizione dei contenuti della sezione <strong>Megamenu</strong>.</p>
      </div>
        <div class="ita-megamenu-main">
        <div class="ita-megamenu-header">
          <a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Esplora la sezione Megamenu</span></a>
        </div>
        <ul class="ita-megamenu-list">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
        </ul>
      </div>
      </div>
    </div>
</details></li>
    </ul>
  </nav>
</div>
<div class="h-96"></div>

Numero di colonne

Mostra il codice HTML
<div class="bg-primary text-primary-content">
  <nav aria-label="Navigazione principale" class="mx-auto w-full max-w-[1320px] px-4">
    <ul class="menu menu-horizontal w-full gap-0 p-0">
      <li><details class="ita-megamenu-item">
  <summary>Due colonne</summary>
  <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-main">
        
        <ul class="ita-megamenu-list">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
        </ul>
      </div>
      </div>
    </div>
</details></li>
      <li><details class="ita-megamenu-item">
  <summary>Tre colonne</summary>
  <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-main">
        
        <ul class="ita-megamenu-list ita-megamenu-cols-3">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 7</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 8</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 9</span></a></li>
        </ul>
      </div>
      </div>
    </div>
</details></li>
    </ul>
  </nav>
</div>
<div class="h-96"></div>

Con link "Esplora la sezione"

Mostra il codice HTML
<div class="bg-primary text-primary-content">
  <nav aria-label="Navigazione principale" class="mx-auto w-full max-w-[1320px] px-4">
    <ul class="menu menu-horizontal w-full gap-0 p-0">
      <li><details class="ita-megamenu-item">
  <summary>Megamenu</summary>
  <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-main">
        <div class="ita-megamenu-header">
          <a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Esplora la sezione Megamenu</span></a>
        </div>
        <ul class="ita-megamenu-list">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
        </ul>
      </div>
      </div>
    </div>
</details></li>
    </ul>
  </nav>
</div>
<div class="h-96"></div>

Con call to action in basso

Mostra il codice HTML
<div class="bg-primary text-primary-content">
  <nav aria-label="Navigazione principale" class="mx-auto w-full max-w-[1320px] px-4">
    <ul class="menu menu-horizontal w-full gap-0 p-0">
      <li><details class="ita-megamenu-item">
  <summary>Megamenu</summary>
  <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-main">
        
        <ul class="ita-megamenu-list">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
        </ul>
      </div>
      </div><div class="ita-megamenu-footer ita-megamenu-footer-end"><a href="#" class="ita-btn ita-btn-primary ita-btn-xs">Call to action</a></div>
    </div>
</details></li>
    </ul>
  </nav>
</div>
<div class="h-96"></div>

Con call to action a destra

Mostra il codice HTML
<div class="bg-primary text-primary-content">
  <nav aria-label="Navigazione principale" class="mx-auto w-full max-w-[1320px] px-4">
    <ul class="menu menu-horizontal w-full gap-0 p-0">
      <li><details class="ita-megamenu-item">
  <summary>Megamenu</summary>
  <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-main">
        
        <ul class="ita-megamenu-list">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
        </ul>
      </div>
        <div class="ita-megamenu-footer ita-megamenu-footer-side"><a href="#" class="ita-btn ita-btn-primary ita-btn-xs">Call to action</a></div>
      </div>
    </div>
</details></li>
    </ul>
  </nav>
</div>
<div class="h-96"></div>

Stato attivo e disabilitato

Mostra il codice HTML
<div class="bg-primary text-primary-content">
  <nav aria-label="Navigazione principale" class="mx-auto w-full max-w-[1320px] px-4">
    <ul class="menu menu-horizontal w-full gap-0 p-0">
      <li><details class="ita-megamenu-item ita-megamenu-active">
  <summary>Attivo</summary>
  <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-main">
        
        <ul class="ita-megamenu-list">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
        </ul>
      </div>
      </div>
    </div>
</details></li>
      <li><details class="ita-megamenu-item ita-megamenu-disabled">
  <summary>Disabilitato</summary>
  <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-main">
        
        <ul class="ita-megamenu-list">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
        </ul>
      </div>
      </div>
    </div>
</details></li>
    </ul>
  </nav>
</div>
<div class="h-96"></div>