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:
xhtml
<div id="menu">
<ul>
<li>
<a xhref=”menucss.php” accesskey=”1″><span>link1</span></a>
</li>
<li>
<a xhref=”menucss1.php” accesskey=”2″><span>link2</span></a>
</li>
<li>
<a xhref=”menucss2.php” accesskey=”3″><span>link3</span></a>
</li>
<li>
<a xhref=”menucss3.php” accesskey=”4″><span>link4</span></a>
</li>
<li>
<a xhref=”menucss4.php” 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:
CSS
#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 xhref=”menucss.php” accesskey=”1″><span>link1</span></a>
</li>
<li id=”link2″>
<a xhref=”menucss1.php” accesskey=”2″><span>link2</span></a>
</li>
<li id=”link3″>
<a xhref=”menucss2.php” accesskey=”3″><span>link3</span></a>
</li>
<li id=”link4″>
<a xhref=”menucss3.php” accesskey=”4″><span>link4</span></a>
</li>
<li id=”link5″>
<a xhref=”menucss4.php” 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 xhref=\”$links[$i]\” accesskey=\”$access[$i]\” > <span>$testolink[$i] </span> </a></li>”;
}
}
?>
</div>
Visualizza l’esempio del CSS menu
Mare Nostrum è una casa editrice Sassarese nata nel 1999. Attraverso un lavoro costante di ricerca e sviluppo, con diversi media e molti target è sempre riuscita a parlare della Sardegna in modo originale ed efficace, comunicando ed esportando uno life style che va oltre il made in Italy, come orgoglio di una identità unica.
E’ online il nuovo 