Realizzare un menu orizzontale con i CSS e renderlo dinamico con PHP
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4.67 out of 5)
Loading ... Loading ...



Pubblicato il 9/4/2009 alle 11:31

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: 399
description: Menu orizzontale con i CSS e reso dinamico con PHP

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

Condividi




Realizzazione siti web



Altri articoli che potrebbero interessarti

2 Responses to “Realizzare un menu orizzontale con i CSS e renderlo dinamico con PHP”

  1. Alessandro Says:
    Gennaio 13th, 2010 at 08:57

    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:
    Gennaio 13th, 2010 at 11:42

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

Leave a Reply