Realizzare un pannello a tab

Utilizzare delle tab all’interno delle pagine web consente spesso una migliore organizzazione e ridistribuzione dei contenuti.

In rete è facilissimo trovare script in Javascript che consentono di realizzare dei menu a schede ma non tutti sanno che è possibile realizzare lo stesso effetto utilizzando semplicemente i fogli di stile.

Vedremo in questa lezione proprio come realizzare un menu a tab utilizzando solo i CSS.

Struttura HTML

Il codice HTML che utilizzeremo è davvero molto semplice. Abbiamo bisogno di una lista puntata per le varie voci delle schede e di un div per ogni scheda che vogliamo includere. Un semplice esempio con tre schede ha la seguente struttura:

<ul id="tabs">
     <li><a href="#tab1">Tab 1</a></li>
     <li><a href="#tab2">Tab 2</a></li>
     <li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="container">
    <div class="content">
        <a name="tab1" id="tab1"></a>
        <h2>Tab 1</h2>

        <p>Lorem ipsum dolor sit amet consectetuer ...</p>

    </div>
    <div class="content">
        <a name="tab2" id="tab2"></a>
        <h2>Tab 2</h2>

        <p>Convallis elit tortor ut ante libero Aenean Maecenas ...</p>
    </div>
    <div class="content">
        <a name="tab3" id="tab3"></a>
        <h2>Tab 3</h2>

        <p>Urna justo quam nunc urna sem facilisis nibh Curabitur tellus quis...</p>
    </div>
</div>

Come possiamo notare dal codice, all’interno dei vari list-item della lista non ordinata abbiamo inserito dei link con delle àncore. Queste àncore si trovano all’interno di ogni div con classe content, ognuna corrispondente ad una voce della lista.

Codice CSS

Ora che abbiamo realizzato la struttura HTML della pagina, possiamo innanzitutto assegnare lo stile alla lista non ordinata e ai vari div contenitori.

#tabs { font-family: Verdana, sans-serif; font-size: 14px; }
#tabs li {
    list-style: none;
    float: left;
    width: 150px;
    height: 35px;
    margin: 0 5px;
}
    #tabs li a {
        background-color: #dedede;
        color: #222;
        font-weight: bold;
        text-decoration: none;
        width: 150px;
        height: 35px;
        display: block;
        float: left;
        line-height: 35px;
        text-align: center;
    }
        #tabs li a:hover,
        #tabs li a:active { background-color: #ededed; }
	div.content {
        color: #222;
        font-family: Verdana;
        font-size: 12px;
        background-color: #efefef;
        padding: 25px;
        width: 600px;
        height: 350px;
        line-height: 22px;
    }
#container { clear: both; }

Anche il codice CSS che abbiamo appena visto è semplicissimo. Per lo più ci siamo occupati di dare dello stile grafico e delle dimensioni fisse agli elementi della lista non ordinata e dei vari div relativi alle schede.

A questo punto dobbiamo rendere visibile il div#container per la dimensione di uno solo dei div, in maniera da nascondere gli altri due non in primo piano. Per fare ciò è sufficiente impostare una larghezza uguale a quella della singola scheda e la proprietà overflow settata su hidden.

L’ultima riga del codice CSS precedente, quindi, diviene:

#container {
    clear: both;
    height: 400px; /* 350px + 25px (padding sx) + 25px (padding dx) */
    overflow: hidden; }

A questo punto possiamo vedere l’esempio.