Demo: Bar navigazione
barre di navigazione
Avendo facile da usare navigazione è importante per qualsiasi sito web.
Con i CSS è possibile trasformare i menu HTML noiose in barre di bell'aspetto navigazione.
Barra di navigazione = Elenco di link
Una barra di navigazione ha bisogno di codice HTML standard come base.
Nei nostri esempi costruiremo la barra di navigazione da un elenco HTML standard.
Una barra di navigazione è fondamentalmente una lista di link, in modo da utilizzare il <ul> e <li> elementi rende perfettamente senso:
Esempio
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Prova tu stesso " Ora cerchiamo di rimuovere i proiettili ei margini e padding dalla lista:
Esempio spiegato:
-
list-style-type: none;- Rimuove i proiettili. Una barra di navigazione non ha bisogno di marcatori lista - Set
margin: 0;epadding: 0;per rimuovere le impostazioni del browser di default
Il codice nell'esempio di cui sopra è il codice standard utilizzato in entrambe le barre di navigazione verticali e orizzontali.
Barra di navigazione verticale
Per costruire una barra di navigazione verticale, è possibile lo stile degli <a> elementi all'interno della lista, oltre al codice di cui sopra:
Esempio spiegato:
-
display: block;- Visualizzazione i link come elementi di blocco rende l'intera area link cliccabile (non solo testo), e ci permette di specificare la width (e padding, margin, height , ecc se si desidera) -
width: 60px;- elementi di blocco occupano l'intera larghezza disponibile per impostazione predefinita. Vogliamo specificare una larghezza di 60 pixel
È inoltre possibile impostare la larghezza di <ul> , e rimuovere la larghezza di <a> , in quanto saranno occupano l'intera larghezza disponibile quando visualizzato come elementi di blocco. Ciò produrrà lo stesso risultato come nell'esempio precedente:
Esempio
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} Prova tu stesso " Esempi verticale barra di navigazione
Creare una barra di navigazione verticale di base con un colore di sfondo grigio e cambiare il colore dei link background quando l'utente sposta il mouse su di loro:
Esempio
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Prova tu stesso " Attivo / Corrente Link di navigazione
Aggiungere una classe di "attivo" per il collegamento corrente per permettere all'utente di sapere quale pagina lui / lei è su:
Centro Links & Aggiungere Borders
Aggiungere text-align:center a <li> o <a> per centrare i link.
Aggiungere il border di proprietà di <ul> aggiungere un bordo intorno alla barra di navigazione. Se si desidera che anche i bordi all'interno della barra di navigazione, aggiungere un border-bottom a tutti <li> elementi, tranne che per l'ultimo:
Esempio
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} Prova tu stesso " Full-altezza fissa verticale Navbar
Creare una a tutta altezza, "sticky" di navigazione laterale:
Esempio
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} Prova tu stesso " Nota: Questo esempio potrebbe non funzionare correttamente sui dispositivi mobili.
Barra di navigazione orizzontale
Ci sono due modi per creare una barra di navigazione orizzontale. Usandoin linea o fluttuantevoci di elenco.
In linea voci di elenco
Un modo per costruire una barra di navigazione orizzontale è quello di specificare i <li> elementi come linea, oltre al "standard" codice di cui sopra:
Esempio spiegato:
-
display: inline;- Per impostazione predefinita, <li> elementi sono elementi di blocco. Qui, togliamo il interruzioni di riga prima e dopo ogni elemento della lista, per visualizzarli su una sola riga
Voci di elenco galleggiante
Un altro modo per creare una barra di navigazione orizzontale è di galleggiare i <li> elementi e specificare un layout per i link di navigazione:
Esempio
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Prova tu stesso " Esempio spiegato:
-
float: left;- l'uso del galleggiante di ottenere elementi di blocco per far scorrere uno accanto all'altro -
display: block;- Visualizzazione i link come elementi di blocco rende l'intera area link cliccabile (non solo testo), e ci permette di specificare imbottitura (e height, width, margins , ecc se si desidera) -
padding: 8px;- Gli elementi di blocco occupano l'intera larghezza disponibile, non possono galleggiare accanto all'altro. Pertanto, specificare alcune imbottiture per farli sembrare buono -
background-color: #dddddd;- Aggiungere uno sfondo grigio-colore ad ogni elemento di un
Suggerimento: Aggiungere il background-color per <ul> al posto di ogni <a> elemento se si desidera un colore di grande ampiezza di fondo:
Esempi orizzontale barra di navigazione
Creare una barra di navigazione orizzontale di base con un colore di sfondo scuro e cambiare il colore dei link background quando l'utente sposta il mouse su di loro:
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;
} Prova tu stesso " Attivo / Corrente Link di navigazione
Aggiungere un "active" di classe per il collegamento corrente per permettere all'utente di sapere quale pagina lui / lei è su:
Link destro Allineare
Collegamenti destro-align di galleggiamento le voci di 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> Prova tu stesso " Divisori di frontiera
Aggiungere il border-right di proprietà di <li> per creare i 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;
} Prova tu stesso " Risolto barra di navigazione
Rendono il soggiorno barra di navigazione nella parte superiore o nella parte inferiore della pagina, anche quando l'utente scorre la pagina:
Nota: Questi esempi potrebbero non funzionare correttamente sui dispositivi mobili.
Grigio orizzontale Navbar
Un esempio di un grigio barra di navigazione orizzontale con un bordo grigio sottile:
Esempio
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Prova tu stesso " 
Altri esempi
topnav responsive
Come utilizzare CSS3 Media Queries per creare una navigazione superiore reattivo.
Sidenav responsive
Come utilizzare CSS3 Media Queries per creare una navigazione lato reattivo.
discesa Navbar
Come aggiungere un menu a discesa all'interno di una barra di navigazione.