Latest web development tutorials

CSS barra di navigazione

Esempio: Barra di navigazione

barra di navigazione

navigazione sapiente uso per qualsiasi sito web è molto importante.

Con i CSS è possibile convertire in una bella barra di navigazione al posto del menu HTML noiosi.

link di navigazione list =

Come una barra di navigazione basato su HTML standard è un must

. Nel nostro esempio, creeremo un elenco HTML barra di navigazione standard.

Barra di navigazione è fondamentalmente una lista di link, in modo da utilizzare <ul> e <li> elementi sono molto significativi:

Esempi

<ul>
<li><a href="default.asp">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 »

Ora, cerchiamo di rimuovere i margini e padding dalla lista:

Esempi

ul
{
list-style-type:none;
margin:0;
padding:0;
}

Prova »

Esempi di analisi:

  • list-style-type: nessuno - prima di rimuovere l'elenco delle bandierine. Una barra di navigazione non ha bisogno di marcatori lista
  • Rimuovere impostazione di default margini e padding set del browser a 0

Il codice di esempio precedente è nei codici verticale e orizzontale della barra di navigazione standard utilizzati.

barra di navigazione verticale

Il codice di cui sopra, abbiamo solo bisogno di elementi di stile <a>, che stabilisce una barra di navigazione verticale:

Esempi

a
{
display:block;
width:60px;
}

Prova »

L'esempio mostra:

  • display: block - visualizzare i collegamenti elemento di blocco, in modo che l'insieme diventa una zona di link cliccabile (non solo testo), che ci permette di specificare la larghezza
  • larghezza: 60px - elementi di blocco di default è la larghezza massima. Vogliamo specificare una larghezza di 60 pixel

Suggerimento: Vedere esempio di un pieno stile barra di navigazione verticale .

Nota: Assicurarsi di specificare la larghezza dell'elemento nella navigazione <a> barra verticale 's.Se si omette la larghezza, IE6 può produrre risultati imprevisti.

barra di navigazione orizzontale

Ci sono due modi per creare una barra di navigazione orizzontale. Utilizzare le voci di elencoin linea o variabile.

Entrambi i metodi vanno bene, ma se si desidera collegare alla stessa dimensione, è necessario utilizzare il metodo di galleggiamento.

voci di elenco in linea

Uno di costruire una barra di navigazione orizzontale è specificare

  • Elemento, il codice di cui sopra è lo standard built-in:

    Esempi

    li
    {
    display:inline;
    }

    Prova »

    Esempi di analisi:

    • display: inline; - Per impostazione predefinita, <li> elemento è un elemento di blocco. Qui, togliamo interruzioni di riga prima e dopo ogni elemento della lista, per visualizzare la linea.

    Suggerimento: Vedere esempio di un pieno stile barra di navigazione orizzontale .

    Floating voci di elenco

    Nei collegamenti Nell'esempio sopra avere diverse larghezze.

    Per tutti i link di uguale larghezza, float <li> elemento e specificare la larghezza dell'elemento <a>:

    Esempi

    li
    {
    float:left;
    }
    a
    {
    display:block;
    width:60px;
    }

    Prova »

    Esempi di analisi:

    • float: left - utilizzare gli scivoli elemento cursore accanto all'altro
    • display: block - visualizzare i collegamenti elemento di blocco, in modo che l'insieme diventa una zona di link cliccabile (non solo testo), che ci permette di specificare la larghezza
    • larghezza: 60px - elementi di blocco di default è la larghezza massima. Vogliamo specificare una larghezza di 60 pixel

    Suggerimento: Vedere esempio di un pieno stile barra di navigazione orizzontale. .