CSS  »  Articoli  »  CSS Menu 

Uno degli elementi che può essere maggiormente personalizzato attraverso i fogli di stile sono le liste di navigazione. Abbiamo visto già visto alcuni ninteressanti applicazioni con la serie di tre articoli dedicati ai Menu grafici con rollover e preload via css (primo, secondo, terzo). Ora vedremo, invece, come sia possibile rendere un mena a "tabs" (cioè a linguette) solo sfruttando i CSS e senza l'uso di immagini. Ecco un'immagine che rappresenta l'esempio che andremo a realizzare in questo tutorial:

Tabs: cosa sono?

Le tabs sono "linguette", voci di un menu orizzontale che possono richiamare, tra gli oggetti reali, un archivio con separatori o una rubrica telefonica. Sono tipicamente e occupano poco spazio occupato nella pagina: generalmente sono disposti sotto l'header e la loro visibilità è massima. Altra caratteristica peculiare delle tabs è che la pagina/sezione corrente del sito risulta evidenziata. Sono queste caratteristiche a rendere particolarmente esteso l'uso delle tabs nei menu di navigazione globale, quelli presenti in tutte le pagine del sito e da cui è possibile accedere alle principali sezioni o aree.

Tabs con bordi

Sono molti gli sviluppatori e appassionati di fogli di stile che negli ultimi mesi hanno presentato la loro versione di CSS tabs. Vedremo qui come realizzare passo passo la versione più semplice. Iniziamo con il codice HTML, si tratta di una lista di navigazione:

<div id="navigation">
<ul>
    <li id="activelink"><a href="index.html">Home</a></li>
    <li><a href="grafica.html">Grafica</a></li>
    <li><a href="webdesign.html">Webdesign</a></li>
    <li><a href="php.html">Php</a></li>
    <li><a href="css.html">Css</a></li>
</ul>
</div>

All'HTML è stato aggiunto un header testuale per presentare la pagina un po' meglio. Ora andiamo a personalizzare il nostro codice con i fogli di stile.

Personalizzare il contenitore del menu

Per prima cosa creiamo una regola per il div id="navigation", andando ad assegnare il colore di sfondo,un bordo inferiore e un padding sul lato sinistro che servirà per distanziare il menu dal bordo della finestra del browser:

div#navigation{
    background-color: #9cf;
    border-bottom: 1px solid #787878;
    padding-left: 20px}

Questo è il risultato ottenuto.Come si può notare c'è una riga bianca che separa l'header dal menu. Vediamo come risolvere il problema

Personalizzare la lista

Quando succede che elementi adiacenti vengono separati da spazi bianchi, probabilmente è una questione di margini. Se non attribuiamo margini agli elementi di una pagina HTML con i CSS, i browser li assegnano automaticamente per consentire una presentazione decente di pagine senza fogli di stile. In tal caso, avendo eliminato i margini dell'header, si tratta sicuramente del margine superiore dell'ul. Andiamo ad eliminare, quindi, i margini, il padding e il tipico disco dalla nostra lista. Ecco la regola:

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

Fin qui questo è il risultato. Arriviamo così alla parte centrale.

Altri articoli

Altre guide

Altre newsletter