Home>Guide>Come creare un menu tabs con CSS

Come creare un menu tabs con CSS

Pubblicato: 8 Luglio 2019
Ultimo aggiornamento: 7 Settembre 2019

Uno degli elementi più utilizzati nel web è la lista di navigazione a “tabs” (o linguette). Se hai dimestichezza con Bootstrap, saprai sicuramente che è uno degli elementi già inclusi di default. Ma spesso, così come in Bootstrap stesso, il menu a tabs è reso possibile tramite l’utilizzo di HTML e CSS per il markup e lo stile e JavaScript, per consentire la attivazione/disattivazione dei vari tabs e la navigazione tra di essi.
Potrebbe essere utile, ma in alcuni casi addirittura necessario, disporre di un menu di navigazione a tabs creato solamente tramite CSS e senza alcun tipo di JavaScript.
Se te lo stai chiedendo, e so che lo stai facendo, si, è possibile!

Leggi l'articolo, ti bastano solo 1 minuto, 30 secondi
Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Sommario

Passo 1: HTML

Per prima cosa, è necessario scrivere il codice HTML necessario a creare le tabs ed i relativi contenuti. Ecco un esempio, che potrai personalizzare a tuo piacimento:

<div class="c4l-tabs">
    <input checked="checked" id="c4l-tab-option_1" type="radio" name="c4l-tab-option" />
    <input id="c4l-tab-option_2" type="radio" name="c4l-tab-option" />
    <input id="c4l-tab-option_3" type="radio" name="c4l-tab-option" />
    <nav>
        <ul>
            <li class="c4l-tab-1">
                <label for="c4l-tab-option_1">First Tab</label>
            </li>
            <li class="c4l-tab-2">
                <label for="c4l-tab-option_2">Second Tab</label>
            </li>
            <li class="c4l-tab-3">
                <label for="c4l-tab-option_3">Third Tab</label>
            </li>
        </ul>
    </nav>
    <div class="c4l-tabs-content">
        <div class="c4l-tab-1">
            <h4>First</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolores velit a praesentium, totam voluptatem reprehenderit earum cumque accusamus repellendus eius officia quam in, nobis, blanditiis dolorem ducimus iure, nesciunt?</p>
        </div>
        <div class="c4l-tab-2">
            <h4>Second</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat exercitationem odit magnam suscipit libero, neque atque hic ex doloribus molestias ullam quas ipsum totam quos, illum dolorum quibusdam molestiae voluptatem!</p>
        </div>
        <div class="c4l-tab-3">
            <h4>Third</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto quae ipsa quo odio provident et, ipsum, perferendis corporis exercitationem expedita debitis quibusdam, earum, officia magnam reiciendis tenetur error id doloremque.</p>
        </div>
    </div>
</div>

Come puoi vedere, abbiamo l’elemento <nav> che contiene l’elenco delle tabs di intestazione e l’elemento <div class=”c4l-tabs-content”> che contiene invece i contenuti di ogni tab. In più, avrai notato la presenza degli <input>. A cosa servono? Un po’ di pazienza, lo scoprirai più avanti!

Ecco come si presenta il markup appena creato:

First

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolores velit a praesentium, totam voluptatem reprehenderit earum cumque accusamus repellendus eius officia quam in, nobis, blanditiis dolorem ducimus iure, nesciunt?

Second

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat exercitationem odit magnam suscipit libero, neque atque hic ex doloribus molestias ullam quas ipsum totam quos, illum dolorum quibusdam molestiae voluptatem!

Third

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto quae ipsa quo odio provident et, ipsum, perferendis corporis exercitationem expedita debitis quibusdam, earum, officia magnam reiciendis tenetur error id doloremque.

Passo 2: CSS

Mettiamo un po’ d’ordine. È necessario dare uno stile per dare al markup appena creato una grafica. Ecco il CSS da applicare, basta inserirlo nel foglio di stile del tuo progetto:

.c4l-tabs > input,
.c4l-tabs .c4l-tabs-content > div {
    display: none;
}
#c4l-tab-option_1:checked ~ .c4l-tabs-content .c4l-tab-1,
#c4l-tab-option_2:checked ~ .c4l-tabs-content .c4l-tab-2,
#c4l-tab-option_3:checked ~ .c4l-tabs-content .c4l-tab-3 {
    display: block;
}
.c4l-tabs {
    margin: 0 auto;
    width: 100%;
}
.c4l-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.c4l-tabs ul li label {
    background-color: #eeeeee;
    border: 1px solid #dddddd;
    border-bottom: 0;
    color: #333333;
    float: left;
    padding: 10px 20px;
}
.c4l-tabs ul li label:hover {
    background-color: #dddddd;
}
.c4l-tabs ul li label:active {
    background-color: #ffffff;
}
.c4l-tabs ul li:not(:last-child) label {
    border-right-width: 0;
}
.c4l-tabs .c4l-tabs-content {
    clear: both;
}
.c4l-tabs .c4l-tabs-content > div {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333333;
    line-height: 1.3em;
    padding: 15px;
    width: 100%;
}
#c4l-tab-option_1:checked ~ nav .c4l-tab-1 label,
#c4l-tab-option_2:checked ~ nav .c4l-tab-2 label,
#c4l-tab-option_3:checked ~ nav .c4l-tab-3 label {
    background-color: #ffffff;
    color: #333333;
    position: relative;
}
#c4l-tab-option_1:checked ~ nav .c4l-tab-1 label::after,
#c4l-tab-option_2:checked ~ nav .c4l-tab-2 label::after,
#c4l-tab-option_3:checked ~ nav .c4l-tab-3 label::after {
    background-color: #ffffff;
    bottom: -1px;
    content: '';
    display: block;
    left: 0;
    height: 2px;
    position: absolute;
    width: 100%;
}

Ed ecco il risultato finale:

First

Second

Third

Come funziona?

Il funzionamento può sembrare complesso, ma in realtà è molto molto semplice. In prima battuta, sono stati nascosti (display: none;) di default sia gli <input> (che hanno solo un ruolo funzionale e non grafico) e i singoli <div> in cui sono presenti i contenuti di ogni singola tab.
Ma il meccanismo fondamentale che sta alla base di tutto, è regolato proprio dagli <input>, in che modo?

Non a caso, sono stati scelti <input> di tipo radio. Un <input> di tipo radio è un gruppo di più <input> con lo stesso nome identificativo in cui solamente un elemento del gruppo può essere attivo (checked). L’attivazione di un elemento del gruppo, comporta automaticamente la disattivazione degli altri membri dello stesso gruppo.

Inoltre, è fondamentale sapere che quando si associa un elemento <label> ad un <input> tramite attributo for, cliccando sulla <label>, questa funziona da “attivatore” per l’<input> a cui è associata.

Semplificando con un esempio, ipotizziamo di avere un <input type=”radio” id=”test_1″> ed una <label for=”test_1″>: grazie all’attributo for della label, quest’ultima viene associata all’input che ha per ID test_1. In questo modo, il click su <label>, avrà lo stesso effetto del click diretto sull’<input>.

Fatte le doverose premesse, il resto vien da sé.
Alle righe 6-10 del CSS, sfruttando l’alternanza degli status dei campi <input> di tipo radio, è specificato che “per ogni input attivo (checked), il relativo contenuto verrà visualizzato (display:block;) rispetto agli altri che hanno di default display:none;“.
Cosa ne pensi? Semplice no?

Guarda la demo su JSFiddle

Scarica questo articolo in versione PDF