Archivio per la categoria Design

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:

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:

• 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:

#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&lt;=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