Codice Megamenù di Livello 1
Struttura della pagina
<header class="it-header-wrapper it-header-sticky"
data-bs-position-type="fixed"
data-bs-toggle="sticky"
data-bs-target="#header-nav-wrapper"
data-bs-sticky-class-name="is-sticky">
{% include html_docs/header/topbar.html %}
{% include html_docs/header/center_menu-vert.html %}
<div id="it25-menu-mega">
{% include html_docs/megamenu/header_megamenu.html %}
</div>
</header>
<main>
. . .
</main>
{% include html_docs/footer/footer.html %}
Pre la struttura della pagina si veda quella del menù verticale, che è identica.
L’unica differenza è l’id del div contenitore che è id="it25-menu-mega" invece di “it25-menu-vert”.
attivazione
Allo stesso modo, per attivare il funzionamento del megamenu dei livello 1, è necessario invocare la funzione:
bootstrap.it25Header()
header_megamenu
Come per il menù verticale, il megamenù deve essere inserito in un tag con queste caratteristiche:
<nav class="collapse it25-vertical-menu" id="it25-main-nav">
<nav class="collapse it25-vertical-menu" id="it25-main-nav">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-4">
<div class="row">
<div class="col-12 it-vertical it-description pb-lg-3">
<div class="description-content ms-3">
<h4 class="fw-normal">Argomenti</h4>
<p>
Testo utile a fornire una descrizione del contenuto delle sezioni del <strong>megamenu</strong>.
</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<span class="link-list-heading text-primary fw-bold">Sezione 1</span>
<ul class="link-list">
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 1</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 2</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 3</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 4</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 5</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 6</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 7</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 8</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 9</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 10</span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<span class="link-list-heading text-primary fw-bold">Sezione 2</span>
<ul class="link-list">
<li >
<a class="dropdown-item list-item active" href="#"><span>Link attivo</span></a>
</li>
<li >
<a class="dropdown-item list-item disabled" href="#"><span>Link disabilitato</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 13</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 14</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 15</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 16</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 17</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 18</span></a>
</li>
<li >
<a class="dropdown-item list-item" href="#"><span>Link lista 19</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>