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.
Aggiungi su OkNotizie
7 Commenti su “Come si crea un pannello tab”
Ottimo manuale
complimenti….interessantissimo
Ciao,
innanzitutto ti meriti i migliori complimenti sia per il blog sia per la qualià dei post!
Ho xò un problema: il foglio di stile css non so dov’è, ne riesco a trovare nell’html i tag style. Spero mi puoi aitare. Grazie
Ciao.. tranquillo, il tag style c’è.. vedo che il tuo Blog Vox Populu sta su blogger. Fai così: vai su modifica html: tra le prime righe del codice troverai il tag title, poco più in basso trovi questa scritta /* Variable definitions , quindi copia il codice subito prima.. Fammi sapere come va..
Ciao Angelo,
scusa se torno a disturbarti. Ho seguito la procedura descritta nel post ma, quando ho provato a vedere il risultato in anteprima, mi ha dato questo errore: Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
Messaggio di errore XML: Element type “getEls.length” must be followed by either attribute specifications, “>” or “/>”.
Non ti so dire dove ho sbagliato. Grazie in anticipo
no, non disturbi, stai tranquillo! Quando c’è questo tipo di errore significa che hai cancellato la chiusura di un tag.. Quando inserisci il codice stai attento a non cancellarne altro..
o un’altra possibile proplema può essere che stai inserendo del codice, prima della chiusura di un’altro.. fammi capire un pò così posso aiutarti meglio, cosa stai realizzando?! che codice stai inserendo?! se è molto lungo rispondi via email.. Ciao, a presto!
Ciao Angrlo,
ti ho inviato un’e-mail.
A presto