Vediamo oggi come realizzare un menu orizzontale con i CSS rendendolo successivamente dinamico con PHP.

menu orizzontale con i css

Per prima cosa aggiungiamo, nella nostra pagina web, un div con id uguale a “menu“. Al suo interno disponiamo i link del nostro menu servendoci di un elenco puntato:

<div id=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Blogroll</a></li>
<li><a href=”#”>Contatti</a></li>
</ul>
</div>

Adesso diamo un pò di stile con i CSS analizzando poi i fattori determinanti:

#menu {
width: 100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000066;
}

#menu ul{
margin: 0;
padding: 0;
list-style: none;
}

#menu li{
display: inline;
margin: 0;
padding: 0;
}

#menu a:link, #menu a:visited{
float: left;
background: #E1E1E1;
color: #000066;
margin: 0;
padding: 3px 3px 3px 3px;
text-decoration: none;
border: 1px solid #000066;
}

#menu a:hover, #menu a:focus, #menu a:active{
color: #000066;
background: #FFFFFF;
}

Innanzitutto evitiamo il simbolo (cerchio, quadarato ecc.) per l’elenco puntato:

list-style: none;

poi disponiamo “inline” gli elementi della lista (li):

display: inline;

le altre regole css applicano la grafica al nostro menu (font, colore testo, colore sfondo).

Vediamo ora come rendere dinamico questo menu con PHP. Immaginiamo di avere un array contenente le voci del menu:

$menu = array(“home”,”about”,”blogroll”,”contatti”);

Avvalendoci di un ciclo foreach stamperemo le voci della lista, cioè le voci del menu:

<ul>
<?php
foreach ($menu as $voce_menu) {
echo ‘<li><a href=”#”>’ .$voce_menu .'</a></li>’;
}
?>
</ul>

Possiamo ora verificare che, aggiungendo elementi all’array $menu, troveremo poi le nuove voci anche nel nostro menu 😉

Qui potete vedere il menu in azione.

Inoltre potete scaricare il file:

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: Menu orizzontale con i CSS e PHP (771B)
added: 09/04/2009
clicks: 2888
description: Menu orizzontale con i CSS e reso dinamico con PHP

NO SPAM. Non fornirò la tua email a terzi e riceverai solo contenuti che ti interessano sugli argomenti che tratto e potrai cancellarti quando vuoi con un link che trovi in tutte le email.