Pannello a tab che si trasforma in accordion con la riduzione dello schermo in jQuery e CSS3.

Pannello a tab o linguette sono  un elemento  piuttosto popolare tra gli sviluppatori di siti Web. L'elemento è presente nella composizione di quasi tutti i framework più popolari, ma di solito sono molto semplici di design e funzionalità.

Nel epoca del design responsivo tutta la struttura del nostro sito deve seguire la tendenza  e visualizzare al meglio ogni componente del sito e in maniera adeguata, anche sui dispositivi piccoli e naturalmente le linguette ( tab ) non fanno eccezione.

Come realizzare pannello a tab che si tarsforma in accordion.

Ci sono varie soluzioni al problema della trasformazione o riduzione dei pannelli a  tab sui schermi piccoli. Oggi vediamo una di questi, vediamo come posiamo con aiuto di CSS e jQuery trasformare un pannello a tab in un accordion o fisarmonica, un altro nome di questo elemento. Cosi rimangono sempre ben in vista i titoli di ogni tab anche sui schermi piccoli.

Per primo creeremo markup o la struttura  in html ,  dopo di che aggiungeremo dei stili CSS per le schede a tab e gli stili per fisarmonica, dopo di che collegeremo la  versione piu recente della libreria jQuey, e con un piccolo js realizzaremo la visualizzazione delle nostre schede nella modalita di pannello a tab e nella modalita di accordion.

Ma prima di cominciare vediamo il lavoro finito per rendersi conto cosa realizzeremo.

Non dimenticare di ridurre la larghezza della finestra del tuo browser per vedere la trasformazione da pannello a tab in fisarmonica.

  • linguetta1
  • Linguetta 2
  • Linguetta 3
  • Linguetta 4

Scheda 1

Contenuto della scheda 1

In una terra lontana, dietro le montagne Parole, lontani dalle terre di Vocalia e Consonantia, vivono i testi casuali. Vivono isolati nella cittadina di Lettere, sulle coste del Semantico, un immenso oceano linguistico.

Scheda 2

Scheda 3

Scheda 4

tab accordion

Okay. Spero che hai visto la trasformazione e se il tema ti interessa andiamo avanti. Per primo come avevo gia detto vediamo di creare la struttura o markup html delle nostre schedetrasformare panello a tab in accordion

Markup html del pannello a tab

In primo luogo, vedimo di crere  un contenitore div-base con la classe come <div class = "tab-box"> e impostiamo la larghezza  width: 100%; , in questo caso il nostro pannello a tab si possa piazzare molto comodamente in qualsiasi altro contenitore (un blocco laterale o nel blocco superiore del menu come esempio) sulla nostra pagina web .
I gia in questo contenitore grande inseriremo linguette e  titoli che fanno da interruttori che in realtà sono una lista non ordinata  <ul>, dove in seguito creiamo unita interne attraverso altri  <div> che conterranno i contenuti e gli elementi della fisarmonica (la barra del titolo), che sarà nascosta nella modalità di pannello a tab.

A questo punto vediamo il codice per capire meglio come è stata pensata e realizzata la struttura.

clicare per vedere il codice html

<!-- Contenitore di base del panello a tab -->
<div class="tabs-box">
   <!-- elenco di tab -->
    <ul class="tabs">
        <li class="active" rel="tab1"> Linguetta 1</li>
        <li rel="tab2">  Linguetta 2</li>
        <li rel="tab3">  Linguetta 3</li>
        <li rel="tab4" class="tab_last">  Linguetta 4</li>
    </ul>
    <!-- Contenitore per i blocchi con il contenuto -->
    <div class="tab_container">
       <!-- La barra con i titoli nella modalità di accordion  -->
        <h3 class="d_active tab_accordion" rel="tab1">  Linguetta 1</h3>
        <!-- Blocco della scheda con contenuto  -->
        <div id="tab1" class="tab_content" style="display: block;">
            <h2>Contenuto della scheda  1</h2>
            <p>In una terra lontana, dietro le montagne Parole, lontani dalle terre di Vocalia e Consonantia, vivono i testi casuali. Vivono isolati nella cittadina di Lettere, sulle coste del Semantico, un immenso oceano linguistico. </p>
        </div>
        <!-- fine #tab1 -->
        <h3 class="tab_accordion" rel="tab2">  Linguetta 2</h3>
        <div id="tab2" class="tab_content" style="display: none;">
            <h2>Contenuto della scheda 2</h2>
            <p><img src="http://lorempixel.com/250/200" class="img-left">
            <p>Un piccolo ruscello chiamato Devoto Oli attraversa quei luoghi, rifornendoli di tutte le regolalie di cui hanno bisogno.</p>.
            <p>È una terra paradismatica, un paese della cuccagna in cui golose porzioni di proposizioni arrostite volano in bocca a chi le desideri.</p>
        </div>
        <!-- fine #tab2 -->
        <h3 class="tab_accordion" rel="tab3">  Linguetta 3</h3>
        <div id="tab3" class="tab_content" style="display: none;">
            <h2> Contenuto della scheda 3</h2>
            <p><img src="http://lorempixel.com/250/200" class="img-right">
            <p>Quando superò i primi colli dei monti Corsivi, si voltò a guardare un’ultima volta la skyline di Lettere, la sua città, la headline del villaggio.</p>
             <p>Un giorno però accadde che la piccola riga di un testo casuale, di nome Lorem ipsum, decise di andare a esplorare la vasta Grammatica. </p>
        </div>
        <!-- fine #tab3 -->
        <h3 class="tab_accordion" rel="tab4">  Linguetta 4</h3>
        <div id="tab4" class="tab_content" style="display: none;">
            <h2> Contenuto della scheda 4</h2>
            <div class="video-responsive">
                <iframe width="1280" height="720" src="http://www.youtube.com/embed/mRrE8CFkkAg" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        <!-- fine #tab4 -->
    </div>
    <!-- fine .tab_container -->
</div>
<!-- fine .tabs-box -->

Come puoi vedere nell'esempio ho mostrato  linguette con il contenuto diverso. Oltre ai contenuti semplici di  testo, e di altri elementi, in particolare con le miniature e le immagini full-size, ho inserito in una delle scheda anche un video da Youtube.  Che si possa inserire attraverso il tag iframe, object o embed un  video che anche sara responsivo.

Nella transizione verso modalita di fisarmonica interruttori delle  linguette miracolosamente si trasformato nel pannello con  titoli, per questo ho uso  tag <h3> con una certa classe e l'attributo rel, per mezzo del quale, come anche nel caso delle schede, ci legheremo intestazioni dal pannello di titoli di fisarmonica a rispettivi blocchi con contenuti.

 <h3 class="d_active tab_accordion" rel="tab1">Scheda 1</h3>

Guarda il  valore di attributo rel="tab1"  che corrisponde esattamente al identificatore id="tab1" del primo blocco di tab (fisarmonica) con un contenuto.

Con style = "display: block;" abbiamo sottolineato che durante la visualizzazione sul browser  verrà mostrato il contenuto della prima scheda.

Questo è tutto ciò che riguarda  markup html di schede con dei elementi inseriti come contenuto  (immagini, anteprime, video ...) Penso che sia abbastanza chiaro il concetto e  brevi commenti nel codice  CSS e HTML  ti saranno d'aiuto.

Stili  CSS del panello a tab adattivo

Ora è necessario formare dei stili comuni e definire l'aspetto delle schede e della fisarmonica con l'aiuto di CSS .

Non voglio spiegare ogni singolo elemento, in particolare, mi fermerò solo sul passaggio del  panello a tab  in modalità fisarmonica utilizzando media query. E qui sotto potrai vedere e analizzare il codice css completo:

cliccare per vedere il codice css

/* schede (tab)
-----------------------------------------------------*/
 
 
/* contenitore base di schede(tab) */
 
.tabs-box {
    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
}
 
 
/* panello di schede */
 
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 42px;
    border-bottom: 1px solid #00655c;
    width: 100%;
}
 
ul.tabs li {
    float: left;
    margin: 0;
    cursor: pointer;
    padding: 0 21px;
    height: 42px;
    line-height: 42px;
    border-top: 1px solid #00655c;
    border-left: 1px solid #00655c;
    border-right: 1px solid #00b7a6;
    background-color: #009688;
    color: #ddd;
    overflow: hidden;
    position: relative;
    font-size: 16px
}
 
 
/* inidichimo lo stile del bordo per l'ultima scheda  */
 
.tab_last {
    border-right: 1px solid #00655c;
}
 
 
/* stili di tab al passaggio del mouse stato hover  */
 
ul.tabs li:hover {
    background-color: #26A69A;
    color: #fefefe;
}
 
 
/* stili della scheda aperta  */
 
ul.tabs li.active {
    background-color: #fff;
    color: #333;
    border-top: 2px solid green;
    display: block;
}
 
 
/* Contenitore delle tab del primo livello  
 * che includono anche la bara con titoli del accordion 
*/
 
.tab_container {
    border: 1px solid #00655c;
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
    overflow: auto;
}
 
 
/* blocchi con contenuto da default sono nascosti  
 * tenere aperta la scheda voluta al caricamento in browser
 * con aiuto di style="display: block;" in html
*/
 
.tab_content {
    padding: 20px;
    display: none;
}
 
 
/* paragrafi al interno dei blocchi con il contenuto */
 
.tab_content p {
    margin-bottom: 10px
}
 
 
/**
 * Immagini al interno dei tab 
 * ...faremo responsive 
 */
 
.tab_content img {
    width: 100%;
    height: auto;
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
 
 
/* immagine intera  */
 
.tab_content img .large-img {
    width: 100%;
    margin-bottom: 10px;
}
 
 
/* miniatura sulla sinistra */
 
.tab_content img.img-left {
    width: 25%;
    float: left;
    margin: 5px 15px 15px 0;
}
 
 
/* miniatura sulla destra */
 
.tab_content img.img-right {
    width: 25%;
    float: right;
    margin: 5px 0 15px 15px;
}
 
 
/* Video incorporato  */
 
.video-responsive {
    margin: 20px;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
 
 
/* Prevedimo di utilizzo del codice per un video incorporato 
 *attraverso iframe, object o embed */
 
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
 
/* accordion è nascosto nella modalità di panello atab  */
 
.tab_accordion {
    display: none;
}
 
 
/* Passagio delle tab nella modalita di accordion 
 * alla riduzione dello schermo sotto i 480px 
*/
 
@media screen and (max-width: 480px) {
    /* nascondiamo i tab  */
    .tabs {
        display: none;
    }
    /* mostrimo elementi di accordion */
    .tab_accordion {
        position: relative;
        background-color: #26A69A;
        font-weight: 400;
        font-size: 16px;
        color: #ddd;
        border-top: 1px solid #ccc;
        margin: 0;
        padding: 14px 20px;
        display: block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    /* panelli di accordion al passaggio del mouse stato hover  */
    .tab_accordion:hover {
        background-color: #009688;
    }
    /* interruttori di panelli, posizione verso sotto  */
    .tab_accordion:before {
        content: '';
        height: 8px;
        width: 8px;
        display: block;
        border: 2px solid #fefefe;
        border-right-width: 0;
        border-top-width: 0;
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        right: 20px;
        top: 18px
    }
    /* stato di panelli attivi */
    .d_active {
        background-color: #008477;
        color: #fff;
    }
    /* interruttore attivo, posizione verso sopra  */
    .d_active.tab_accordion:before {
        border: 2px solid #fefefe;
        border-left-width: 0;
        border-bottom-width: 0;
        top: 18px
    }

Non ho specificato un font specifico per le singole schede, questo lo potresti fare da solo usando i font che stai utilizando nel tuo progetto, o inserendo il codice sopra verrà applicato il font di base del tuo sito.

Nella esempio ho utilizzando un font dalla famigli di Roboto, che ho collegato direttamente da Google Fonts.

Nel spostarsi dalle linguette(tab) allo stato della fisarmonica nella visualizzazionedi esso  su  schermo di dimensioni più piccole, ho utilizzando una sola media query con il valore massimo della larghezza. Fino il quale la fisarmonica è nascosta e la schede di tab vengono mostrati nel suo stato normale, e al raggiungimento e diminuizione ulteriore della larghezza dello schermo indicata nel media query il nostro panello a tab passa nella modalità del accordion

@media screen and (max-width: 480px) {
    /* nascondimo i tab */
    .tabs {
        display: none;
    }
    /* mostriamo elementi di accordion */
    .tab_accordion {
        position: relative;
        background-color: #26A69A;
        font-weight: 400;
        font-size: 16px;
        color: #ddd;
        border-top: 1px solid #ccc;
        margin: 0;
        padding: 14px 20px;
        display: block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    /* scede di accordion allo stato hover  */
    .tab_accordion:hover {
        background-color: #009688;
    }
    /* interruttore di schede, posizione verso sotto  */
    .tab_accordion:before {
        content: '';
        height: 8px;
        width: 8px;
        display: block;
        border: 2px solid #fefefe;
        border-right-width: 0;
        border-top-width: 0;
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        right: 20px;
        top: 18px
    }
    /* stato di pannelli attivi/visualizzati  */
    .d_active {
        background-color: #008477;
        color: #fff;
    }
    /* interruttore di schede, posizione verso sopra*/
    .d_active.tab_accordion:before {
        border: 2px solid #fefefe;
        border-left-width: 0;
        border-bottom-width: 0;
        top: 18px
    }
}

Di conseguenza, il valore di max-width: 480px potresti sempre modificare impostando il valore che desideri, sperimentando, la cosa principale che il risultato deve sembrato corretto e logico.

Inoltre è possibile utilizzare un maggiore numero di richieste di media query  per i diversi tipi di dispositivi degli utenti, che permetteranno una maggiore flessibilità nella personalizzazione di schede nello stato di fisarmonica o tab.

jQuery del panello a tab trasformabile in accordion

Al momento attuale, viste le capacità dei browser moderni con il supporto delle nuove caratteristiche di CSS3, questo tipo passaggio di tab  in una fisarmonica, può essere implementato usando solo i mezzi CSS, che forse vedremo nei prosimi articoli
Per quanto riguarda panello a tb di oggi avremo  bisogno della  libreria javascript jQuery,  utilizzare l'ultima versione collegandola direttamente dal CDN di Google. Se sul tuo progetto non utilizzi ancora  jQuery allora vediamo come collegarla  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Ora, per far funzionare le nostre schede sulla pagina web, dovremo aggiungere un piccolo javascript per mezzo del quale realizzeremo visualizzazione e apertura di nostre schede con il contenuto sia nella modalità del tab sia in quella del accordion.

<script>
    // schede con il contenuto 
    // http://ioeweb.it
    $(".tab_content").hide();
    $(".tab_content:first").show();
    /* nella modalita di tab  */
    $("ul.tabs li").click(function () {
        $(".tab_content").hide();
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn();
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_accordion").removeClass("d_active");
        $(".tab_accordion[rel^='" + activeTab + "']").addClass("d_active");
    });
    /* nella modalita di accordion */
    $(".tab_accordion").click(function () {
        $(".tab_content").hide();
        var d_activeTab = $(this).attr("rel");
        $("#" + d_activeTab).fadeIn();
        $(".tab_accordion").removeClass("d_active");
        $(this).addClass("d_active");
        $("ul.tabs li").removeClass("active");
        $("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");
    });
    /* una classe aggiuntiva  tab_last, 
    per aggiungere un bordo al lato sinistro del ultima scheda  */
    $('ul.tabs li').last().addClass("tab_last");
</script>

Okey, a questo punto il nostro lavoro è finito. Se la idea ti e piaciuta condividi sul social magari sara utile non solo a te.

Linguetta(tab)
Letto 356 volte