Attenzione! Questo contenuto è vecchioQuesto articolo risale al 2010, quindi i contenuti e le operazioni qui consigliate potrebbero essere diventate obsolete nel corso del tempo.
I menu a tab sono snelli da implementare, belli da vedere e soprattutto molto funzionali. Permettono una maggiore leggibilità delle pagine web senza sacrificare lo spazio, ottimizzandolo al meglio.
Una ottima implementazione, che a me è personalmente sempre piaciuta, di questa tipologia di menu tabbati è sicuramente quella di monclick.it.
Il grosso problema della loro implementazione però è che necessita di un sacco di righe di markup HTML che è fondamentalmente inutile perchè fa parte dei placeholder delle immaginette che servono a dare l'effetto grafico.
Eccovi l'esempio dell'output di questa implementazione, (consiglio di dare anche un'occhiata al markup del frame per rendersi conto della semplicità del lavoro)
Eccovi quindi una rapidissima implementazione di questo menu con queste sole righe di codice:
Markup HTML basilare
<div id="something" class="tabContainer">
<div>
<h5 class="tabName">Tab Uno</h5>
Contenuto Uno (div, immagini, qualsiasi cosa)
</div>
<div>
<h5 class="tabName">Tab Due</h5>
Contenuto Due (div, immagini, qualsiasi cosa)
</div>
<div>
<h5 class="tabName">Tab Tre</h5>
Contenuto Tre (div, immagini, qualsiasi cosa)
</div>
</div>Per arrivare ad avere un tabber funzionante sono però necessarie alcune righe di Javascript e alcune altre di CSS, eccole qui:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ( $('div.tabContainer').length > 0 ) {
$('div.tabContainer').each(function() {
var tabArray = Array();
var i = 1;
var _this_html = '';
var styleClass = '';
// Trovo e salvo i div che devono essere tabbati, applico le classi e nascondo tutti tranne il primo
$(this).find('div').has('h5.tabName').each(function() {
tabArray = $(this).find('h5').html();
$(this).find('h5').remove();
$(this).addClass('__tab_' + i).addClass('tabbable');
if ( i == 1 ) $(this).show(); else $(this).hide();
i++;
});
// Calcolo codice HTML per l'iniettamento dei controllori del tab
_this_html = '<ul class="tabController">';
for ( var k = 1; k < i; k++ ) {
if ( k == 1 ) styleClass = 'firstTab';
else if ( k == i-1 ) styleClass = 'lastTab';
else styleClass = 'normalTab';
_this_html += '<li class="' + styleClass + '"><a href="javascript:void(0);" onclick="_tabber_openTab(this, ' + k + ');">' + tabArray[k] + '</a></li>';
}
_this_html += '</ul><br clear="both" />';
// Inietto i controllori del tab
$(this).prepend(_this_html);
});
// Avvio la riprograrrazione per la stilizzazione dei tab
$('ul.tabController').each(function() {
var i = 1;
$(this).find('li').each(function () {
if ( i == 1 ) $(this).prepend('<div class="tab_spacer_style_one"> </div>');
else $(this).prepend('<div class="tab_spacer_style_normal"> </div>');
i++;
});
$(this).find('li:last').after('<li class="dummy"><div class="tab_spacer_style_dummy"> </div></li>');
_tabber_openTab( $(this).find('li a:first'), 1 );
});
}
});
function _tabber_openTab(element, index) {
// Prima fase, logica di visualizzazione / hiding dei contenitori
$(element).closest('div.tabContainer').find('div.tabbable').each(function() {
$(this).hide();
});
$(element).closest('div.tabContainer').find('div.__tab_' + index).show();
// Seconda fase, logica di stilizzazione
// Step 1, aggiunta stili ai padri <li>
$(element).closest('ul.tabController').find('li').each(function() {
$(this).removeClass('tab_on').removeClass('tab_off').addClass('tab_off');
});
$(element).closest('li').removeClass('tab_off').addClass('tab_on');
// Step 2, modifica classi elementi <div> dentro i <li>
// rimessa a punto di tutte le classi
var i = 1;
$(element).closest('ul.tabController').find('li').each(function() {
if ( i == 1 ) $(this).find('div').removeClass().addClass('tab_spacer_style_one');
else if ( i == $(element).closest('ul.tabController').find('li').length ) $(this).find('div').removeClass().addClass('tab_spacer_style_dummy');
else $(this).find('div').removeClass().addClass('tab_spacer_style_normal');
i++;
});
// Modifica classi per i successivi
var i = 1;
$(element).closest('ul.tabController').find('li').each(function() {
if ( i == index + 1 ) { // elemento seguente a quello selezionato
if ( i == $(element).closest('ul.tabController').find('li').length ) $(this).find('div').removeClass().addClass('tab_spacer_style_lastnexton');
else $(this).find('div').removeClass().addClass('tab_spacer_style_normalnexton');
}
i++;
});
}
</script>Ed ecco le istruzioni CSS per far funzionare il tutto:
div.tabContainer ul.tabController { margin: 0; padding: 0; list-style-type: none; clear:both; }
div.tabContainer ul.tabController li { float: left; list-style-type: none; height: 23px; }
div.tabContainer ul.tabController li a { margin: 0 15px 0 8px; line-height: 23px; font-size: 12px; font-weight: 700; color: #2B9CD4; }
div.tabContainer ul.tabController li div { float: left; height: 23px; }
div.tabContainer ul.tabController li.tab_on { background: #FFFFFF url(tabs.gif) repeat-x scroll 0 -224px; }
div.tabContainer ul.tabController li.tab_off { background: #FFFFFF url(tabs.gif) repeat-x scroll 0 -196px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_one { width: 4px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -28px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_normal { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px 0px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_dummy { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -84px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_normalnexton { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -56px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_lastnexton { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -112px; }
div.tabContainer ul.tabController li.tab_on div.tab_spacer_style_one { width: 4px; background: #FFFFFF url(tabs.gif) no-repeat scroll -7px -28px; }
div.tabContainer ul.tabController li.tab_on div.tab_spacer_style_normal { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -140px; }
