Realizzare un menu orizzontale con i CSS e renderlo dinamico con PHP
Vediamo oggi come realizzare un menu orizzontale con i CSS rendendolo successivamente dinamico con PHP.
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:
|
download: Menu orizzontale con i CSS e PHP (771B) added: 09/04/2009 clicks: 1292 description: Menu orizzontale con i CSS e reso dinamico con PHP |
Invia questo articolo a un amico via email
Ciao,
Complimenti per il Blog e il tutorial che è proprio quello che stavo cercando. Mi stavo chiedendo però una cosa. Come faccio ad inserire dinamicamente il link al tag al posto del “#” dinamicamente?
Grazie e ancora compliementi.
Ciao Alessandro, grazie per i complimenti.
Per inserire la url dei link il concetto è lo stesso, serviti di un array contenente le url corrispondenti alle voci di menu e quando inserisci $voce_menu come anchor text inserisci pure $url_menu (ad esempio) al posto di #.