Menu orizzontale
Menù principale di navigazione
Può contenere, oltre a semplici link, menù dropdown e megamenu.
E’ anche possibile definire un gruppo di link di secondaria importanza che si posizionano automaticamente sul lato destro del menù e con caratteri leggermente più piccoli.
Su smartphone
- La visualizzazione è comandata dal bottone hamburger nella barra istituzionale
- Le voci sono visualizzate in verticale (per questione di spazio) su un pannello a comparsa con scorrimento orizzontale dal lato sinistro e con oscuramento della pagina sottostante.
A scorrimento in basso
- Se aperto, il menù e la pagina sottostante scorrono separatamente a seconda di dove sia il cursore.
- Se la pagina scorre e la testata si stringe o allarga, il menù aperto si sposta di conseguenza, rimanendo appena sotto la barra istituzionale.
Su desktop
E’ sempre visualizzato e, a scorrimento in basso, rimane posizionato fisso sotto la barra istituzionale o eventualmente sotto la barra utente.
<div class="it-header-navbar-wrapper it25-menu-principale">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="it25-main-nav">
<div class="overlay it25-overlay"></div>
<div class="close-div sr-only">
<button class="btn close-menu" type="button">
<span class="it-close"></span>close
</button>
</div>
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><span>Link</span></a>
</li>
<li class="nav-item active">
<a class="nav-link active" href="#"><span>Attivo</span><span class="sr-only">voce selezionata</span></a>
</li>
<li class="nav-item"><a class="nav-link disabled" href="#"><span>Disabled</span></a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
<span>Dropdown</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="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc" id="heading-es-1">Heading</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>
<li><span class="divider"></span></li>
<li><a class="list-item" href="#"><span>Link list 4</span></a></li>
</ul>
</div>
</div>
</li>
<li 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 class="no_toc">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 class="no_toc">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 class="no_toc">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>
</li>
</ul>
<ul class="navbar-nav navbar-secondary">
<li class="nav-item">
<a class="nav-link" href="#">
Link A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link B</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>Nota: per poter meglio rendersi conto del comportamento di questo componente è utile richiamare una delle schermate composte, per esempio quella della Tabella complessa, e provare a restringere la finestra video e far scorrere la pagina in basso e in alto.