Barra di navigazione orizzontale CSS
Barra di navigazione orizzontale
Esistono due modi per creare una barra di navigazione orizzontale. Utilizzo di elementi di elenco in linea o mobili .
Voci dell'elenco in linea
Un modo per costruire una barra di navigazione orizzontale è specificare gli elementi <li> come inline, oltre al codice "standard" della pagina precedente:
Esempio
li
{
display: inline;
}
Esempio spiegato:
display: inline;- Per impostazione predefinita, gli elementi <li> sono elementi di blocco. Qui, rimuoviamo le interruzioni di riga prima e dopo ogni elemento dell'elenco, per visualizzarle su una riga
Voci di elenco fluttuanti
Un altro modo per creare una barra di navigazione orizzontale è rendere mobili gli elementi <li> e specificare un layout per i collegamenti di navigazione:
Esempio
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Esempio spiegato:
float: left;- Usa float per far fluttuare gli elementi del blocco uno accanto all'altrodisplay: block;- Ci consente di specificare il riempimento (e altezza, larghezza, margini, ecc. se lo desideri)padding: 8px;- Specifica un riempimento tra ogni elemento <a>, per farli sembrare bellibackground-color: #dddddd;- Aggiungi un colore di sfondo grigio a ogni elemento <a>
Suggerimento: aggiungi il colore di sfondo a <ul> invece di ogni elemento <a> se desideri un colore di sfondo a larghezza intera:
Esempio
ul
{
background-color: #dddddd;
}
Esempi di barra di navigazione orizzontale
Crea una barra di navigazione orizzontale di base con un colore di sfondo scuro e cambia il colore di sfondo dei link quando l'utente passa il mouse su di essi:
Esempio
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
Collegamento di navigazione attivo/corrente
Aggiungi una classe "attiva" al link corrente per far sapere all'utente in quale pagina si trova:
Esempio
.active {
background-color: #04AA6D;
}
Collegamenti allineati a destra
Allineare a destra i collegamenti spostando gli elementi dell'elenco a destra ( float:right;):
Esempio
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
Divisori di confine
Aggiungi la border-rightproprietà a <li> per creare divisori di collegamento:
Esempio
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Barra di navigazione fissa
Fai in modo che la barra di navigazione rimanga nella parte superiore o inferiore della pagina, anche quando l'utente scorre la pagina:
Parte superiore fissa
ul {
position: fixed;
top: 0;
width: 100%;
}
Fondo fisso
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Nota: la posizione fissa potrebbe non funzionare correttamente sui dispositivi mobili.
Barra di navigazione orizzontale grigia
Un esempio di barra di navigazione orizzontale grigia con un bordo grigio sottile:
Esempio
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Barra di navigazione appiccicosa
Aggiungi position: sticky;a <ul> per creare una barra di navigazione appiccicosa.
Un elemento adesivo alterna tra relativo e fisso, a seconda della posizione di scorrimento. Viene posizionato in modo relativo fino a quando una determinata posizione di offset non viene raggiunta nella finestra, quindi "si attacca" in posizione (come position:fixed).
Esempio
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Nota: Internet Explorer non supporta il posizionamento permanente. Safari richiede un prefisso -webkit- (vedi esempio sopra). È inoltre necessario specificare almeno uno di top, right, bottomo leftaffinché il posizionamento permanente funzioni.
Altri esempi
Navigazione superiore reattiva
Come utilizzare le query multimediali CSS per creare una navigazione superiore reattiva.
Sidenav reattivo
Come utilizzare le media query CSS per creare una navigazione laterale reattiva.
Barra di navigazione a discesa
Come aggiungere un menu a discesa all'interno di una barra di navigazione.
Mai sentito parlare di W3Schools Spaces ? Qui puoi creare il tuo sito Web da zero o utilizzare un modello e ospitarlo gratuitamente.
Inizia gratuitamente ❯* nessuna carta di credito richiesta