Realizzare un menu orizzontale con i CSS e renderlo dinamico con PHP




Pubblicato il 9/4/2009 alle 11:31

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

emawebdesign

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 emawebdesign

Qui potete vedere il menu in azione.

Inoltre potete scaricare il file:

emawebdesign 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

Pubblicato in: CSS, HTML, News, PHP, Programmazione, Risorse, Scripts, Web Design | 2 Commenti »








Invia questo articolo a un amico via email Invia questo articolo a un amico via email

Altri articoli che potrebbero interessarti

2 Commenti per “Realizzare un menu orizzontale con i CSS e renderlo dinamico con PHP”

  1. Alessandro says:

    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.

  2. EmaWebDesign says:

    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 #.

Lascia un commento