MaurizioFonte.it

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

Per arrivare ad avere un tabber funzionante sono però necessarie alcune righe di Javascript e alcune altre di CSS, eccole qui:

Ed ecco le istruzioni CSS per far funzionare il tutto:

Avrete inoltre bisogno di una immagine che contiene tutti i background per i bottoni e per la stilizzazione, e la trovate A questo Indirizzo

La direzione che si sta cercando di seguire, parlando in termini di "standardizzazione" dei formati relativi alle pagine web, è quella di lasciar cadere piano piano l'utilizzo di Internet Explorer 6, che è rinomato per la sua non uniformazione agli standard odierni relativi ai fogli di stile CSS.
Questo fatto implica infatti un notevole impegno di tempo da parte degli sviluppatori web per cercare di "adattare" una pagina web - quindi un layout con un determinato foglio di stile - per il suo funzionamento pseudocorretto anche se viene visualizzata con Internet Explorer 6.

Gli strumenti che gli sviluppatori web hanno a dispozizione per far cessare l'utilizzo di Internet Explorer 6 sono molto pochi, e solo il tempo molto probabilmente consentirà un graduale abbandono di questo datato browser. E' altresì vero comunque che gli stessi sviluppatori web possono dare una mano nella velocizzazione di questo processo. Vediamo come.

Se avete sotto mano Internet Explorer 6, provate a visualizzare l'homepage di questo sito, ovvero mauriziofonte.it. In alto vi verrà mostrato un messaggio non invasivo che vi consiglierà l'aggiornamento del vostro browser. Nel caso specifico, nel messaggio presente in questo sito ho deciso di consigliare Mozilla Firefox, perchè personalmente lo ritengo un ottimo browser. Cliccando sul messaggio, verrete infatti reindirizzati alla pagina di scaricamento di Firefox, ovvero mozilla-europe.org/it/firefox/

Avere un messaggio del genere anche sul vostro sito è molto semplice, e servono pochissimi passaggi per creare questo effetto. Vediamo cosa serve per installarlo, nel dettaglio.

Il file immagine da me utilizzato che si chiama IE6alert.gif è disponibile per il download qui: IE6alert.gif

Per installarlo sulla vostra pagina, è sufficiente copiare il codice HTML del messaggio nel vostro template, è sufficiente aggiungere il codice CSS del div contenitore #ie6warning all'interno del CSS del vostro sito, e stessa cosa per il codice javascript. Dovrete avere però già abilitata e disponibile la libreria jQuery.

Così facendo, però, il messaggio sarà sempre visibile! Come fare quindi per mostrarlo SOLO nel caso in cui l'utente stia visualizzando la pagina con IE6??
Molto semplice. Basta fare un controllo lato server.
Per il mio caso specifico, mi sono basato su una classe di browser detection molto semplice ed intuitiva.
Una volta installata sul server, basterà inserire un codice php simile a questo all'interno delle routine di calcolo delle pagine: $br = new Browser; if ( $br -> Name == 'MSIE' && ($br -> Version <= 6) ) { $messaggio_IE6 = '<div id="ie6warningHolder"><a href="javascript:void(0)" id="ie6warning"><span class="text">Sembra che tu stia ancora utilizzando IE6. Passa adesso a Firefox per visualizzare correttamente le tue pagine web preferite!</span><span class="closer" alt="Chiudi Avviso" title="Chiudi Avviso">X</span></a></div>'; echo $messaggio_IE6; } Niente di particolarmente difficile. Pochi minuti per avere nel nostro sito un fantastico messaggio assolutamente non invasivo che consiglia l'aggiornamento del browser.
Per qualsiasi dubbio o chiarimento, non esitate a lasciare un commento.