Abbiamo già affrontato altre volte l’argomento di quanto ormai i CSS e i JavaScript siano legati fra loro, questo articolo è un esempio calzante di quello che si può ottenere sapendo sfruttare al meglio le due tecnologie con un occhio rivolto anche all’aspetto estetico.

Come è ormai noto in tutto il mondo le intelaiature grafiche di casa Apple fanno scuola per insegnare il buon gusto e la praticità; e allora perché non utilizzarle proiettate verso il web publishing? Ci ha pensato aleto.ch dimostrando la grande versatilità e leggerezza dei due linguaggi applicandoli ad un menu di navigazione di un sito web.
La tecnica è estremamente semplice e intuitiva, quasi tutto si basa sull’utilizzo degli elenchi puntati e di una sapiente attenzione nei confronti della grafica.

In realtà vi è un grosso aiuto mosso grazie a JavaScript, in quanto bisogna utilizzarlo per rendere compatibile e funzionante il tutto.

Creiamo il framework

Per prima cosa dobbiamo creare una struttura dei nostri collegamenti; come spiegato prima questa deve essere un elenco non ordinato, sarà poi compito del CSS quello di ottimizzare la grafica e il comportamento. Questa lista per ora sarà spoglia di qualsiasi riferimento e immagini; a questo livello l’unica informazione che possiamo implementare all’elenco ordinato è un <ul id=”panel”>, che successivamente scriveremo nel foglio di stile.
E’ importante spiegare fin da adesso che il menu si “muove” grazie alla contemporanea presenza di un elenco puntato all’interno di un altro elenco, fondamentalmente una sorta di “scatola cinese” per i link.

CODICE HTML
<h1>Sickbrain.org</h1>
<ul id="panel">
 <li><h2><a href="">Preferiti</a></h2>
  <ul>
    <li><a href="1”>Link n° 1</a></li>
    <li><a href="2”>Link n° 2</a></li>
    <li><a href="3”>Link n° 3</a></li>
  </ul>
 </li>
</ul>

A questo punto avremo sicuramente un framework che presenta un aspetto scarno; nessun problema, da adesso inizieremo a lavorare al CSS per ottenere il nostro menu Mac.

Lavoriamo sullo stile

D’ora in avanti ci concentreremo solamente sul nostro CSS. Iniziamo subito definendo come vogliamo si comportino i nostri elenchi all’interno della pagina e come questi devono essere posizionati:

* {
  margin:0;
  padding:0;
  text-decoration:none;
  list-style:none;
  font-weight:normal;
}
body {
  font-family:"Lucida Sans Unicode", sans-serif;
  font-size:12px;
  width:250px;
  margin:0 auto;
  background:#999 url("metall.gif") repeat-y scroll 50% 0;
}

E’ importante notare il primo comando; senza dubbio l’impostazione più interessante è quella che riguarda la dichiarazione list-style:none, questa impedisce la visualizzazione dei blocchi in un elenco puntato, aiutandoci così moltissimo per quanto riguarda l’estetica. Anche il margin e il padding, impostati entrambi a zero, ci aiutano nell’impaginazione.
Per ciò che concerne body si può solamente dire che così scritto imposta uno sfondo “metallico” solo centralmente e per la grandezza impostata.

Adesso che abbiamo deciso come volevamo vedere la nostra pagina ci possiamo sbizzarrire sul nostro pannello di navigazione, andando per prima cosa a creare un DIV id=”panel” che poi richiameremo all’esigenza. Imposteremo la grandezza e il padding per il posizionamento del menu; inoltre decideremo il comportamento dell’elenco nel caso in cui sia presente un link.

#panel {
  width:224px;
  padding:18px;
}
#panel li {
  width:224px;
  position:relative;
}
#panel a {
  display:block;
  width:219px;
}

A questo punto lavoriamo su alcuni elementi che ci serviranno più avanti nella strutturazione e funzionamento del menu. Una di queste caratteristiche è quella di controllare il comportamento degli elementi H2 quando risultano essere dei collegamenti ipertestuali.

#panel h2 a {
  background:transparent none repeat scroll top right;
  line-height:28px;
  font-size:20px;
  color:#ffffff;
  text-align:right;
  width:214px;
  padding:0 5px;
}
#panel h2 a:hover {
  background:transparent url('black.png') repeat scroll top right;
}

Le nozioni sono estremamente semplici e di facile fruizione. Fondamentalmente vi è un controllo sull’estetica dell’elemento H2 con annessi.

Il risultato dei nostri sforzi dovrebbe adesso apparire come qualcosa del genere; si può notare che effettivamente non vi è nulla di diverso di una “normale” lista. A questo punto allora inizieremo il vero e proprio lavoro di implementazione con il JavaScript che andremo ad utilizzare in futuro.

Naturalmente dovrà essere integrato nel codice CSS che adopereremo, e per tanto con un DIV class possiamo decidere il comportamento degli elementi che presentano questa caratteristica e come farli apparire.

#panel .open {
  background:transparent url('top.png') no-repeat scroll 0 0;
  padding:1px 0;
  margin-bottom:-5px;
}
#panel .open h2 {
  position:relative;
  z-index:2;
  background:transparent url('back.gif') no-repeat scroll 200px 9px;
}
#panel .open h2 a {
  color: #6e6e6e;
  text-align:left;
  width:194px;
  margin:10px 15px 0 15px;
  padding:0;
}
#panel .open span {
  display:block;
  width:224px;
  height:27px;
  background:transparent url('bottom.png') no-repeat scroll left top;
}

Il nome del DIV class utilizzato è .open, è importante ricordarselo in quanto, più avanti, ci servirà per far funzionare il tutto con l’aiuto di JS.

Osservando il codice ci rendiamo conto che questo lavora fondamentalmente basandosi sul framework HTML che abbiamo compilato precedentemente. Il DIV class .open controlla semplicemente l’aspetto e il comportamento spaziale degli elementi.

Solo per un ampliamento di nozione posso specificare perché si utilizza il position:relative e il z-index:2 nel DIV class .open h2. Il primo serve per poter posizionare l’elemento all’interno e relativamente del suo box contenitore. Invece il z-index:2 serve per evitare che questo elemento venga sovrapposto da un altro.

Il DIV class .open span è quello che permette la chiusura del box, all’interno del quale sono posizionati i collegamenti ipertestuali.

Oltre a questo dobbiamo iniziare a pensare alle nostre liste; allora per prima cosa iniziamo a controllare il comportamento degli elementi <ul> e poi di quelli <li>

#panel .open ul {
  background:transparent url('center.png') repeat-y scroll left top;
  width:194px;
  padding:24px 15px 3px 15px;
  margin:-27px 0 0 0;
}
#panel .open li {
  width:194px;
  margin:2px 0 0 0;
  background:transparent url('metall16.gif') repeat scroll 0 0;
}
#panel .open ul a {
  background:transparent url('metall15.gif') repeat scroll 0 0;
  text-align:right;
  width:184px;
  padding: 0 5px;
  margin:0;
  font-size: 9px;
  color: #6e6e6e;
  font-weight:bold;
  line-height:18px;
  font-size:12px;
  color: #828282;
}
#panel .open ul a:hover {
  background-image:none;
  color: #464646;
}
#panel .open ul a img {
  border:0px solid;
  float:left;
  padding:1px;
  margin:0px;
  margin-left:-5px;
}
#panel .open ul li span {
  background:transparent none;
  height:0px;
  width:1px;
  border-top:1px solid transparent;
  clear:both;
  margin:-1px 0 0 0;
  padding:0;
}
#panel li ul {
  display:none;
}
#panel .open ul {
  display:block;
}

Niente di troppo complesso oppure astruso in queste righe di codice; fondamentalmente descrivono il comportamento delle liste che gestiranno e daranno vita al nostro menu.

Piuttosto, giungiamo al succo della discussione e proviamo a visualizzare il nostro lavoro fino a questo punto; dovrebbe apparire qualcosa del genere, ma, noterete subito che, anche se l’impaginazione è coerente e costante con il codice enunciato, manca del tutto il meccanismo funzionante.

Il JavaScript

Affinché il tutto funzioni con successo dobbiamo mettere in correlazione il codice HTML+CSS e il suo bel JavaScript.

Qui lo potrai vedere e, una volta salvata la pagina, utilizzare a tuo piacimento.

Il fattore IE

Avremo terminato il nostro tutorials, se non fosse che, esiste un browser il quale presenta qualche difficoltà nell’interpretare correttamente le immagini in formato PNG.

Infatti, se puoi, visualizza questo esempio per IE con il browser di casa Redmond e noterai immediatamente il brutto atteggiamento che questo assume; per evitare notti insonni e crisi isteriche si può adottare un’alternativa validissima e di ottima fattura: ingannare Internet Explorer!

* html #panel h2 a:hover {background:transparent none; ¬
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='black.png', ¬
    sizingMethod='scale');}
* html #panel .open ul {background:transparent none; ¬
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='center.png', ¬
    sizingMethod='scale');}
* html #panel .open span {background:transparent none; ¬
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bottom.png', ¬
    sizingMethod='scale');}
* html #panel .open {background:transparent none; ¬
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='top.png', ¬
    sizingMethod='crop'); }

Grazie all’utilizzo del filtro AlphaImageLoader i programmatori della Microsoft sono riusciti a mettere una toppa ad un errato comportamento del loro browser nel momento in cui doveva posizionare oppure gestire l’allineamento di immagini PNG.

Per poter cantare vittoria e terminare il tutto ci manca l’ultimo tocco di stile, il tutto sempre per permette alle versioni 5.5 oppure superiori di Internet Explorer di non avere problemi.

* html #panel {float:left;}
* html #panel .open li span {display:inline;}
* html #panel .open a {background-position:200px 20px;}

Finalmente siamo riusciti a terminare il nostro tutorial, se mi avete seguito con calma e attenzione il vostro risultato non dovrebbe essere lontano da quello che potete visualizzare qui.

Se siete interessati alle grandi potenzialità di questa tecnica vi consiglio di dare un’occhiata al sito Aleto.ch, dove potete vedere in azione, su JavaScript diversi, questa tecnica.