Web design, css design e programmazione web - Mario Carboni

Da tempo avevo intenzione di pubblicare un articolo sulla realizzazione completa di un template basato sugli standards xhtml/css; un articolo che partendo dal canvas bianco di photoshop arrivasse alla realizzazione passo passo di un template:

• da Photoshop al sito xhtml/css
• l’articolo è stato pubblicato anche su html.it

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:

• link1
• link2
• link3
• link4
• link5

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:

• link1
• link2
• link3
• link4
• link5

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