Home>Guide>Come creare un menu tabs con CSS

Come creare un menu tabs con CSS


Come creare un menu tabs con CSS


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!

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>
    <section>
        <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>
    </section>
</div>

Come puoi vedere, abbiamo l’elemento <nav> che contiene l’elenco delle tabs di intestazione e l’elemento <section> 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 section > div {
    display: none;
}

#c4l-tab-option_1:checked ~ section .c4l-tab-1,
#c4l-tab-option_2:checked ~ section .c4l-tab-2,
#c4l-tab-option_3:checked ~ section .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 section {
    clear: both;
}
.c4l-tabs section > 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

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.


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?




Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Disabilitare il cambio password in WordPress

Disabilitare il cambio password in WordPress


Vuoi rimuovere l’opzione di recupero e cambio password in WordPress? Ecco come fare.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)