Un tutorial sulla realizzazione di un menu realizzato con una lista orizzontale in xhtml e CSS, associato ad un semplice script PHP per gestire lo stato corrente della navigazione.
Visualizza l’esempio del CSS menu
Lista non ordinata
Partiamo da una lista non ordinata e quindi da una struttura di questo tipo:
html
<div id="menu">
<ul>
<li><a accesskey="1"><span>link1</span></a></li>
<li><a accesskey="2"><span>link2</span></a></li>
<li><a accesskey="3"><span>link3</span></a></li>
<li><a accesskey="4"><span>link4</span></a></li>
<li><a accesskey="5"><span>link5</span></a></li>
</ul>
</div>
Che produce questo:
Trasformiamo la lista verticale in una orizzontale applicando una prima formattazione CSS:
CSS
#menu ul{
list-style: none;
}
#menu ul li{
display: block;
float: left;
}
che produce:
Image-replacement
Vogliamo sostituire ogni link con un immagine diversa, quindi abbiamo bisogno di un identificatore univoco che ci permetta di gestire ogni singolo link. Creiamo quindi degli id con width e height uguali alle immagini create (in questo caso di larghezza 50px e altezza 21px) e li associamo ad ogni tag <li> della lista. Fatto questo, per rendere invisibile il testo adottiamo la ben nota tecnica di image-replacement, ovvero inseriamo un tag <span> all’interno del tag <a> in modo da poter applicare la regola:
#menu li a span{
display: none;
}
associamo , inoltre, un bordo rosso allo stato hover dei link e ad una classe che utilizzeremo per evidenziare la voce della lista corrispondente alla pagina corrente:
#menu ul{
list-style: none;
}
#menu ul li{
display: block;
float: left;
width: 50px;
height: 21px;
}
#menu li a{
display: block;
width: 50px;
height: 21px;
}
#menu li a:hover{
border-bottom: 1px solid #f00;
}
.corrente{
border-bottom: 1px solid #f00;
}
#menu li a span{
display: none;
}
#link1{
background: url(link1.gif) no-repeat;
}
#link2{
background: url(link2.gif) no-repeat;
}
#link3{
background: url(link3.gif) no-repeat;
}
#link4{
background: url(link4.gif) no-repeat;
}
#link5{
background: url(link5.gif) no-repeat;
}
Modifichiamo il codice xhtml per inserire gli identificatori:
xhtml
<div id="”menu”">
<ul>
<li id="”link1?"><a accesskey="1"><span>link1</span></a></li>
<li id="”link2?"><a accesskey="2"><span>link2</span></a></li>
<li id="”link3?"><a accesskey="3"><span>link3</span></a></li>
<li id="”link4?"><a accesskey="4"><span>link4</span></a></li>
<li id="”link5?"><a accesskey="5"><span>link5</span></a></li>
</ul>
</div>
Mettiamo tutto insieme con lo script PHP
Vogliamo fare in modo che la voce di menu corrispondente alla pagina corrente venga evidenziata e non sia cliccabile. Possiamo, quindi, associare al link corrispondente una classe che ne modifichi l’aspetto e rimuovere il collegamento ipertestuale; questo però ci costringe a modificare ogni singola pagina. Posizioniamo allora, il menu in un file esterno e includiamo tale file in ogni pagina tramite la direttiva include(); di PHP, in questo modo:
<? include("menu.php"); ?>
Passiamo ora alla realizzazione dello script in PHP che ci permette di modificare lo stato del menu in base all’URI della pagina corrente.
Memorizziamo con degli array, i nomi delle pagine, i nomi accesskey, il testo per i link e gli id. Avviamo un ciclo for e facciamo un controllo fra il nome dello script, che preleviamo dalla variabile $_SERVER(PHP_SELF), e l’array dove sono contenuti i nomi delle pagine:
PHP
<div id="menu">$links = array("menucss.php", "menucss1.php", "menucss2.php", "menucss3.php", "menucss4.php");
$access = array("a", "b", "c", "d".'e');
$testolink = array("link1", "link2", "link3", "link4", "link5");
echo “<ul>”;
for($i=0; $i<=count($links)-1; $i++) {
if($links[$i] == basename($_SERVER[’PHP_SELF’])) {
echo “<li id="\”$testolink[$i]\”" class="\”corrente\”"> <span>$testolink[$i]</span></li>”;
}
else {
echo “<li id="\”$testolink[$i]\”"> <a accesskey="\”$access[$i]\”"> <span>$testolink[$i] </span> </a></li>”;
}
}
?>
</ul>
</div>
Visualizza l’esempio del CSS menu
E’ online il nuovo 
Luglio è stato un mese passato lontano da tutto ciò che mi è familiare, sono stato in un posto molto caldo (45°/50° C), con dei paesaggi incredibili, cucina ottima e caliente, e della gente fantastica.
Dopo un anno come quello appena passato una vacanza ci voleva, ricaricare le pile, rilassarsi al fresco vedere posti nuovi, conoscere nuova gente… e allora quale meta migliore del MESSICO?
