Megamenu
La Documentazione Tecnica mostra diverse tipologie di megamenu.
Megamenu Classico
Si raccomanda di utilizzare questo componente nella forma più semplice e pulita, utilizzando il megamenu classico, con o senza intestazione delle colonne.
<div class="nav-item dropdown megamenu">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
<span>Megamenu</span>
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-expand"></use>
</svg>
</a>
<div class="dropdown-menu">
<div class="row">
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3>Heading 1</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 1 </span></a></li>
<li><a class="list-item" href="#"><span>Link list 2 </span></a></li>
<li><a class="list-item" href="#"><span>Link list 3 </span></a></li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3>Heading 2</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 1 </span></a></li>
<li><a class="list-item" href="#"><span>Link list 2 </span></a></li>
<li><a class="list-item" href="#"><span>Link list 3 </span></a></li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3>Heading 3</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 1 </span></a></li>
<li><a class="list-item" href="#"><span>Link list 2 </span></a></li>
<li><a class="list-item" href="#"><span>Link list 3</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>Link more, call to action, immagini
NON UTILIZZARE:
- link more
- call to action sia in basso che a destra
- immagini inserite all’interno
Riferimenti
Il contenuto di questa pagina si riferisce ai seguenti punti della Documentazione Tecnica: