Come si crea un pannello tab

La comodità di avere una sezione del nostro sito con un pannello tab ci permette di raccogliere in modo ordinato i contenuti e sopratutto di evitare di ricaricare la pagina. Questa soluzione si rivela utile nelle home-page, dove puoi utilizzarlo per catalogare le ultime news, si può utilizzare per creare una gallery o perfino per realizzare un menu con sottovoci. Nell'esempio mi sono divertito ad usare le tab per realizzare un mini-sito, soluzione interessante per quei siti piccoli che raccolgono solo testo.

Vediamo come funziona.
Inanzitutto copia e incolla questo breve javascript prima del tag </head>:

<script type="text/javascript" language="javascript">

onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTagName ('DIV') [i++]) {
if (e.className == 'on' || e.className == 'off') {
e.onclick = function () {
var getEls = document.getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
getEls[z].className=getEls[z].className.replace('show', 'hide');
getEls[z].className=getEls[z].className.replace('on', 'off');
}
this.className = 'on';
var max = this.getAttribute('title');
document.getElementById(max).className = "show";}}}}
</script>

Ora copia e incolla nel tuo codice css (se è nella pagina stessa inseriscilo tra i tag style, altrimenti se è in un foglio esterno copiacelo alla fine) queste classi e id:

#gallery {display:block; width:100%; height:35px; background-color:#f1f1f1; border-top:1px dashed #999; border-bottom:1px dashed #666; margin:0 auto; overflow:hidden;}

#gallery div.off {float:left; position:relative; z-index:99; width:80px; height:35px; line-height:35px; background-color:#f0f0f0; padding:0 10px; background-image:none}

#gallery div.off:hover {color:#FF3300; background-color:#f6f6f6; background-image:url(backbutton.gif) }

#gallery div.on {float:left; position:relative; z-index:100; width:80px; height:35px; line-height:35px; background-color:#fcf6f6; padding:0 10px; background-image:url('backbutton.gif') }

div.hide {display:none; width:0; overflow:hidden; }

div.show {display:block; clear:left; position:relative; z-index:50; margin:0 auto; width:90%; height:300px; padding:5%; background-color:#fcf6f6; }

Veniamo all'html. Crea un div con id="gallery" e all'interno metti il menù che controlla le tab. Inserisci la classe on nel prima voce, mentre tutte le altre avranno classe off. Poi inserisci ad ogni voce ll'attributo title con il nome della sezione (per essere più semplice ti conviene metterci lo stesso nome che compare sul menù). Come nell'esempio:

<div id="gallery">

<div class="on" title="Home"><a href="#">Home</a></div>
<div class="off" title="ChiSono"><a href="#">Chi Sono</a></div>
<div class="off" title="ImieiLavori"><a href="#">I miei lavori</a></div>
<div class="off" title="Contattami"><a href="#">Contattami</a></div>

</div>

Ora crea le div che visualizzeranno i contenuti. Attribuiscili un id uguale al title che hai usato nella voce correlata del menu, e dai la classe show al primo div, e hide per tutte le altre. Come nell'esempio:

<div class="show" id="Home">Questa è la Home Page</div>
<div class="hide" id="ChiSono">Ecco finalmente Chi Sono</div>
<div class="hide" id="ImieiLavori">L'elenco dei miei Lavori</div>
<div class="hide" id="Contattami">Scopri come contattami</div>

Come puoi vedere è molto semplice. Ovviamente puoi adattare le tab alla grafica del tuo blog o sito intervenendo direttamente sul Css che abbiamo utilizzato. Per capire meglio il codice puoi scaricare la demo e analizzarla. Se hai qualche dubbio o problema a riguardo sono a disposizione.

Scarica la demo.

Articoli correlati per categorie