Quando si è diffusa la moda dei menu CSS basati sulle liste non ordinate, uno degli esperimenti più interessanti furono le Minitabs di Dan Cederholm. Il tema è stato affrontato anche su HTML.it in un articolo di Alessandro Fulciniti.
Qualche tempo fa Stephen G. Clark ha pensato bene di combinare la tecnica CSS alla base di Minitabs con uno script di LayerOffice, Focus Slide. Il risultato è Mini slide, un menu molto semplice, di facilissima implementazione, ma al tempo stesso elegante ed efficace. Ecco subito l'esempio che andremo a realizzare. È contenuto nel pacchetto zip allegato all'articolo insieme ai due file fondamentali per la realizzazione dell'effetto:
- il foglio di stile minislide_nav.css
- lo script focus_slide.js
Il codice HTML
Per la creazione del menu si parte naturalmente dalla definizione della struttura HTML. Si tratta di una semplicissima lista non ordinata (ul):
<ul id="navheader">
<li id="home"><a href="#" title="Home page di HTML.it">HTML.it</a></li>
<li id="css"><a href="#" title="CSS">CSS</a></li>
<li id="javascript"><a href="#" title="Javascript">Javascript</a></li>
<li id="grafica"><a href="#" title="Grafica">Grafica</a></li>
<li id="webdesign"><a href="#" title="Web Design">Web Design</a></li>
</ul>
Ecco il risultato.
C'è solo un'osservazione importante da fare. La lista deve avere come id navheader. Ciascuna voce del menu, poi, sarà un link, con l'attributo href settato sul classico valore dei collegamenti 'vuoti': #.
Il CSS
Ora aggiungiamo il CSS. Quello dell'esempio (tratto dall'originale) è minimale. A voi l'onore e il piacere di personalizzarlo secondo i vostri gusti. La sintassi per l'inserimento è quella nota:
<link rel="stylesheet" type="text/css" href="minislide_nav.css" /></link>
Ecco cosa otteniamo: un semplicissimo menu orizzontale basato su una lista. È questo che vede un utente che abbia Javascript disabilitato, potendo sempre contare quindi su un menu funzionanante.
Javascript in azione
Ora l'ultimo passo: aggiungiamo lo script.
<script type="text/javascript" src="focus_slide.js"></script>
Siamo tornati all'esempio finale.
Lo script può essere lasciato intatto. Una cosa è però da spiegare. Il piccolo rettangolo blue dell'esempio, quello che segue il movimento del mouse per intenderci, è in realtà un div con id="slider" creato dallo script. Il suo aspetto può essere modificato, come l'intero menu, agendo sul CSS. Per la precisione sulla regola seguente:
#slider {
position:absolute;
border-bottom:5px solid #78919B;
width:80px;
height:16px;
margin:0 2px 0 2px 0;
z-index:2;
margin-left : 5px;
}
Sapendo questo, si può arrivare ad una conclusione. Mantenendo intatta la struttura HTML e il codice Javascript, è possibile lavorare sul CSS creando delle vere e proprie skin personalizzate. Basta intervenire per esempio sugli elementi primari come colori e font, creare per ciascuno un CSS e importarli a piacimento.
