CSS tutorial: Tab menu con HTML, CSS e la pseudo-classe :target

Come da titolo in questo tutorial veremo come realizzare un menu a tabelle usando HTML e CSS senza alcun uso di Javascript, in particolare andremo a vedere come usare la pseudo classe :target dei CSS3 e la proprietà Z-index.

:target: Questa pseudo classe introdotta nei CSS3 ha la funzione di andare a “colpire un bersaglio”, come dice anche lo stesso nome, nel caso di questo tutorial un elemento div e di fargli compiere una azione.

Z-index: è una proprietà dei CSS3 che organizza livelli e box secondo l’asse Z dello schermo, quindi se attribuiremo a un elemento A uno z-index:2 e ad un elemento B uno z-index:1 l’elemento B sarà sotto nel piano Z rispetto all’elemento A, quindi nel caso si sovrapponessero questi due elementi noi vedremo B coperto da A.

Download Demo

Struttura HTML:

Per prima cosa creiamo un div per ogni tabella e in questo caso 3 tabelle quindi tre div assegnandoli un id diverso per ogni tabella e invece una classe comune in questo caso .tabella che servirà per dare un aspetto identico a tutte e tre le tabelle.

   <div id="tab1" class="tabella"><h1>Finestra 1</h1></div>
   <div id="tab2" class="tabella"><h1>Finestra 2</h1></div>
   <div id="tab3" class="tabella"><h1>Finestra 3</h1></div>

adesso creiamo un menu all’interno dei tag ul e li e poi al suo interno un tag a con un link ancora alle tabelle.

   <ul>
      <li><a href="#tab1">Menu 1</a></li>
      <li><a href="#tab2">Menu 2</a></li>
      <li><a href="#tab3">Menu 3</a></li>
   </ul>

CSS

Cominciamo con dare una dimensione e dei colori alla classe .tabella, questo servirà come detto sopra a dare lo stesso aspetto a tutte e tre le tabelle, inoltre sarà fondamentale usare la proprietà position:absolute per fare in modo che i tre div con id tab1,2,3 si sovrappongano.

div.tabella {
        background: #f1f1f1;
        color: #333;
        position: absolute;
        margin: 0 auto;
        padding: 20px;
        width: 500px;
	height:300px;
}
div#tab1,#tab2,#tab3 {top: 100px; } //per posizionare le tabelle 100px sotto il margine alto del browser

Ora basterà specificare che: Ogni volta una delle tre voci menu verrà cliccata, la rispettiva tabella sarà visualizzata sopra le altre due, mostrandone i contenuti, questo lo facciamo tramite l’uso di target e z-index:

div.tabella:target { z-index: 1;}

A questo punto l’essenziale per rendere attive le tabelle è già stato fatto ora possiamo aggiungere testi, immagini e stili CSS per abbellirne l’aspetto.

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco