W3.Barre di navigazione CSS
Verticale:
Orizzontale:
Classi della barra di navigazione W3.CSS
W3.CSS fornisce le seguenti classi per le barre di navigazione:
| Classe | Definisce |
|---|---|
| w3-barra | Contenitore orizzontale per elementi HTML |
| blocco barra w3 | Contenitore verticale per elementi HTML |
| w3-bar-elemento | Elementi della barra del contenitore |
| w3-barra laterale | Barra laterale verticale per elementi HTML |
| w3-mobile | Rende ogni elemento della barra mobile first responsive |
| w3-dropdown-hover | Elemento a discesa fluttuante |
| w3-clic a discesa | Elemento a discesa cliccabile (anziché al passaggio del mouse) |
Navigazione di base
La classe w3-bar è un contenitore per la visualizzazione orizzontale di elementi HTML.
La classe w3-bar-item definisce gli elementi del contenitore.
È uno strumento perfetto per creare barre di navigazione:
Esempio
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Navigazione reattiva
La classe w3-mobile rende reattivo qualsiasi elemento della barra (orizzontale su schermi grandi e verticale su piccoli).
Schermi medi e grandi:
Piccoli schermi:
Esempio
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
Barre di navigazione colorate
Usa una classe w3-color per aggiungere un colore alla barra di navigazione:
Esempio
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
Barre di navigazione delimitate
Usa una classe w3-border o w3-card per aggiungere bordi intorno alla barra di navigazione o per visualizzarla come una scheda:
Esempio
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
Collegamento attivo/corrente
Aggiungi una classe w3-color a un link per evidenziarlo:
Esempio
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Collegamenti fluttuanti
Quando passi il mouse su un pulsante, il colore di sfondo cambia in grigio.
Se vuoi un colore di sfondo diverso al passaggio del mouse, usa una delle classi di colori w3-hover- :
Esempio
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a>
</div>
Se invece vuoi cambiare il colore del testo, disattiva l'effetto al passaggio del mouse predefinito con la classe w3-hover-none e aggiungi una classe w3-hover-text .
Esempio
<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div>
Dedica un po' di tempo a giocare con diversi effetti al passaggio del mouse:
Esempio
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div>
Collegamenti allineati a destra
Utilizzare la classe w3-right su un elemento dell'elenco per allineare a destra un collegamento specifico:
Esempio
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 3</a>
</div>
Dimensioni della barra di navigazione
Usa una classe di dimensioni w3 per modificare la dimensione del carattere dei collegamenti all'interno della barra di navigazione:
Esempio
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
Usa una classe w3-padding per modificare il riempimento di ciascun collegamento all'interno della barra di navigazione:
Esempio
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
Nota: puoi anche aggiungere spaziatura interna alla barra di navigazione, invece di ogni pulsante. Tuttavia, se lo fai, tieni presente che i collegamenti non ottengono il riempimento completo al passaggio del mouse:
Esempio
<div class="w3-bar w3-green w3-padding-16"></div>
Personalizza la larghezza dei link con la proprietà CSS width
( Nota : usa w3-mobile per trasformare i link al 100% di larghezza su piccoli schermi):
Esempio
<div class="w3-bar w3-dark-grey">
<a href="#"
class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 2</a>
</div>
Barra di navigazione con icone
Esempio
<div class="w3-bar w3-light-grey w3-border">
<a href="#"
class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
Le classi "fa fa" nell'esempio sopra mostrano le icone "Font Awesome".
Ulteriori informazioni su come visualizzare le icone nel capitolo Icone W3.CSS .
Testo della barra di navigazione
Se vuoi testo invece di pulsanti all'interno della barra di navigazione, usa la classe w3-bar-item per ottenere lo stesso riempimento dei pulsanti.
Esempio
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<span
class="w3-bar-item">Text</span>
</div>
Navbar con ingressi e pulsanti
Esempio
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
Barra di navigazione con menu a discesa
Sposta il mouse sul link "Dropdown":
Esempio
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Menu a discesa cliccabile
Usa w3-dropdown-click se preferisci fare clic sul collegamento a discesa invece di passare il mouse:
Esempio
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div id="demo"
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Menu a discesa orizzontale
Rimuovere la classe w3-bar-block dal contenitore a discesa se si desidera visualizzare i collegamenti a discesa orizzontalmente anziché verticalmente:
Esempio
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Barra di navigazione reattiva con menu a discesa reattivo
Utilizza la classe w3-mobile su tutti i collegamenti, incluso il contenitore a discesa, per creare una barra di navigazione reattiva con collegamenti a discesa reattivi.
Ridimensiona la finestra del browser per vedere l'effetto:
Esempio
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button w3-mobile w3-green">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div>
Fixed Navigation Bar
To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:
Fixed Top
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
Fixed Bottom
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
Vertical Navigation Bar
The w3-bar-block class is a container for displaying HTML elements vertically.
Example
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Collapsing the Navigation Bar
When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.
In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:
Example
Side Navigation
The w3-sidebar class creates a side navigation:
Go to the next chapter to learn more about the side navigation.