W3.CSS fornire tutti i tipi di barre di navigazione:
Verticale:
Orizzontale (verticale su schermi di piccole dimensioni):
navigazione di base
La classe w3-navbar crea una barra di navigazione orizzontale:
Esempio
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Prova tu stesso " Barre di navigazione colorata
Esempio
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> Prova tu stesso " Bar Delimitata navigazione
Esempio
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> Prova tu stesso " Attivo / collegamento corrente
Esempio
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Prova tu stesso " Link Hoverable
Quando il mouse sopra i link all'interno della barra di navigazione, il colore di sfondo cambierà in grigio.
Se si desidera un colore di sfondo diverso su passaggio del mouse, usare una qualsiasi delle classi colore W3-hover-, e se si desidera un colore diverso del testo al passaggio del mouse, utilizzare una delle classi di w3-hover-text-color:
Esempio
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> Prova tu stesso " Link allineato a destra
Esempio
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> Prova tu stesso " Barra di navigazione Size
Modificare la dimensione del carattere:
Esempio
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> Prova tu stesso " Modificare il padding:
Esempio
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> Prova tu stesso " Personalizzare la larghezza delle voci di elenco con la proprietà width CSS (Nota: su schermi più piccoli, si trasformeranno al 100%):
Esempio
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> Prova tu stesso " Barra di navigazione con icone
Esempio
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> Prova tu stesso " Barra di navigazione con discesa
Spostare il mouse sopra il link "discesa":
Esempio
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> Prova tu stesso " Nota: Quando il menu a discesa è "aperto", il collegamento a discesa ottiene un colore di sfondo grigio per indicare che è attivo. Per ignorare questo, aggiungere una classe di colore w3-hover- sia alla "discesa" <li> e <a>:
Suggerimento: se si desidera un simbolo a discesa accanto al testo discesa, aggiungere un'icona adatta (come ):
Esempio
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> Prova tu stesso " Utilizzare w3-discesa-click se si preferisce cliccare sul link discesa invece di hover:
Esempio
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> Prova tu stesso " Risolto barra di navigazione
Per forzare la barra di navigazione per rimanere in cima o in fondo alla pagina, anche quando l'utente scorre la pagina, avvolgono un <div> elemento attorno al <ul> e aggiungere il w3-top o classe di w3-bottom:
Collassare la barra di navigazione
Quando la barra di navigazione occupa troppo spazio su un piccolo schermo, e non si desidera visualizzare in verticale per impostazione predefinita, è possibile utilizzare classi di utilità per nascondere e mostrare i collegamenti specifici nella barra di navigazione.
Nell'esempio che segue, la barra di navigazione viene sostituito con un pulsante (☰) nell'angolo in alto a destra quando indicato sul tablet e dispositivi mobili. Quando il pulsante viene premuto, la barra di navigazione viene visualizzata in verticale:
Esempio
Prova tu stesso "topnav
Un altro esempio di una barra di navigazione, è la classe w3-topnav. È simile a w3-barra di navigazione, tranne che aggiungerà una sottolineatura quando si passa sopra i link, invece di un colore di sfondo:
Esempio
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Prova tu stesso " Esempio con caratteri icone impressionanti
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Prova tu stesso " navigazione laterale
La classe w3-sidenav crea una barra di navigazione verticale:
Vai al capitolo successivo per conoscere meglio la navigazione laterale.