Box con menu (css e php):
In pratica possiamo indicare al browser il tipo di style da associare al menu, e variarlo se attivato. L'esempio in oggetto è compatibile con tutte le NUOVE versioni di browser. Non è stato testato con le versioni precedenti.
Nel caso vogliate utilizzarlo copiate il codice compreso tutte le tabulazioni (a capo compresi), o potreste avere dei problemi con firefox.
Esempio:
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.menuno{font-size:13px; height:200px; width:400px; margin:10px; padding:10px; background:#FFFFFF;}
.mendue{padding:6px 4px 4px 4px; display:inline; background: url(menu2b.png) no-repeat top left;}
.mentre{padding:6px 4px 4px 4px; display:inline; background: url(menu1b.png) top center;}
.menqua{padding:6px 4px 4px 4px; display:inline; background: url(menu3b.png) no-repeat top right; margin-right:2px;}
.mendueb{border-bottom:2px solid #febabc; position:relative; z-index:20; padding:6px 4px 4px 4px; display:inline; background: url(menu2c.png) no-repeat top left;}
.mentreb{border-bottom:2px solid #febabc; position:relative; z-index:20; padding:6px 4px 4px 4px; display:inline; background: url(menu1c.png) top center;}
.menquab{border-bottom:2px solid #febabc; position:relative; z-index:20; padding:6px 4px 4px 4px; display:inline; background: url(menu3c.png) no-repeat top right; margin-right:2px;}
.mencon{position:relative; z-index:10; overflow:auto; overflow:auto; margin-top:4px; padding:4px; background:#febabc; height:150px; border:2px solid #bb0309;}
.mensep{padding:6px 0px 2px 0px; display:inline; width:10px;}
.menlink{color:#febabc; font-style:italic; font-weight:bold; font-family: arial,sans-serif; }
.menlinkb{color:#bb0309; font-style:italic; font-weight:bold; font-family: arial,sans-serif; }
</style>
</head>
<body>
<?
$pianta=$_GET['pianta'];
?>
<div class="menuno">
<div class="mensep">
</div>
<div class="<? if($pianta=="edera"){echo"mendueb";}else{echo"mendue";}?>">
</div>
<div class="<? if($pianta=="edera"){echo"mentreb";}else{echo"mentre";}?>">
<a class="<? if($pianta=="edera"){echo"menlinkb";}else{echo"menlink";}?>"
href="articolo-css-menu.php?pianta=edera">Edera</a>
</div>
<div class="<? if($pianta=="edera"){echo"menquab";}else{echo"menqua";}?>">
</div>
<div class="<? if($pianta=="menta"){echo"mendueb";}else{echo"mendue";}?>">
</div>
<div class="<? if($pianta=="menta"){echo"mentreb";}else{echo"mentre";}?>">
<a class="<? if($pianta=="menta"){echo"menlinkb";}else{echo"menlink";}?>" "
href="articolo-css-menu.php?pianta=menta">Menta</a>
</div>
<div class="<? if($pianta=="menta"){echo"menquab";}else{echo"menqua";}?>">
</div>
<div class="<? if($pianta=="salvia"){echo"mendueb";}else{echo"mendue";}?>">
</div>
<div class="<? if($pianta=="salvia"){echo"mentreb";}else{echo"mentre";}?>">
<a class="<? if($pianta=="salvia"){echo"menlinkb";}else{echo"menlink";}?>" "
href="articolo-css-menu.php?pianta=salvia">Salvia</a>
</div>
<div class="<? if($pianta=="salvia"){echo"menquab";}else{echo"menqua";}?>">
</div>
<div class="mencon">
<?
if($pianta=="edera"){
echo"<img src=\"edera.jpg\" style=\"float:left; border:0px; margin:3px;\" alt=\"edera\" />Il genere Hedera della
famiglia delle Apiaceae (già Araliaceae), comprende numerose specie, tra cui la comunissima Edera (Hedera helix)
pianta lianiforme rampicante sempreverde, odorosa e velenosa, di altezza variabile da 50 cm a 15 m, comune nei giardini
e nei nostri boschi dal mare al monte; ha fusti lignificati ramosi, aderisce facilmente al substrato grazie alle radici
avventizie aggrappanti, raccolte in tipici fascetti, le foglie sono lungamente picciolate, coriacee, intere di colore
verde scuro......";
}
elseif($pianta==menta){
echo"<img src=\"menta.jpg\" style=\"float:left; border:0px; margin:3px;\" alt=\"menta\" />La menta (genere Mentha) è
una pianta erbacea perenne, stolonifera, fortemente aromatica, che appartiene alla famiglia delle Labiate (Lamiaceae).
Cresce in modo massiccio in tutta Europa, in Asia e in Africa e predilige sia le posizioni in pieno sole che la mezza
ombra, ma può resistere anche a basse temperature. Molto conosciuta già dal tempo degli egizi e dei Romani, veniva
usata da Galeno come pianta medicinale.<br />
La menta, secondo la specie, è un'erba alta da qualche cm a poco più di un metro, con steli eretti e radici rizomatose
che si espandono notevolmente nel suolo.<br />
Le foglie sono opposte e semplici e nella maggior parte delle specie sono lanceolate e ricoperte di una leggera peluria
di colore verde brillante.<br />
I fiori sono raccolti in spighe terminali, coniche, che fioriscono a partire dal basso verso l'alto. I singoli fiori,
simpetali e irregolari, sono piccoli, di colore bianco, rosa o viola; la corolla, parzialmente fusa in un tubo, si apre
in due labbra, la superiore con un solo lobo, l'inferiore con 3 lobi disuguali. La fioritura avviene in piena estate e
prosegue fino all'autunno.<br />
Il frutto è una tetrachenio che contiene da 1 a 4 semi.......";
}
elseif($pianta==salvia){
echo"<img src=\"salvia.jpg\" style=\"float:left; border:0px; margin:3px;\" alt=\"salvia\" />Il genere Salvia
comprende diverse specie di piante odorose appartenenti alla famiglia delle Lamiacee, la stessa famiglia del timo e
della menta.<br />
In cucina è considerata una spezia....
";
}
else{
echo "Il regno delle Piante comprende circa 350.000 specie di organismi viventi, distinti comunemente con i nomi di
alberi, arbusti, cespugli, erbe, rampicanti, succulente, felci, muschi e molti altri ancora.<br />
La maggior parte delle piante esistenti e conosciute sono incluse nel gruppo delle Angiosperme (divisione Magnoliophyta)
, con circa 250.000 specie....";
}
?>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.menuno{font-size:13px; height:200px; width:400px; margin:10px; padding:10px; background:#FFFFFF;}
.mendue{padding:6px 4px 4px 4px; display:inline; background: url(menu2b.png) no-repeat top left;}
.mentre{padding:6px 4px 4px 4px; display:inline; background: url(menu1b.png) top center;}
.menqua{padding:6px 4px 4px 4px; display:inline; background: url(menu3b.png) no-repeat top right; margin-right:2px;}
.mendueb{border-bottom:2px solid #febabc; position:relative; z-index:20; padding:6px 4px 4px 4px; display:inline; background: url(menu2c.png) no-repeat top left;}
.mentreb{border-bottom:2px solid #febabc; position:relative; z-index:20; padding:6px 4px 4px 4px; display:inline; background: url(menu1c.png) top center;}
.menquab{border-bottom:2px solid #febabc; position:relative; z-index:20; padding:6px 4px 4px 4px; display:inline; background: url(menu3c.png) no-repeat top right; margin-right:2px;}
.mencon{position:relative; z-index:10; overflow:auto; overflow:auto; margin-top:4px; padding:4px; background:#febabc; height:150px; border:2px solid #bb0309;}
.mensep{padding:6px 0px 2px 0px; display:inline; width:10px;}
.menlink{color:#febabc; font-style:italic; font-weight:bold; font-family: arial,sans-serif; }
.menlinkb{color:#bb0309; font-style:italic; font-weight:bold; font-family: arial,sans-serif; }
</style>
</head>
<body>
<?
$pianta=$_GET['pianta'];
?>
<div class="menuno">
<div class="mensep">
</div>
<div class="<? if($pianta=="edera"){echo"mendueb";}else{echo"mendue";}?>">
</div>
<div class="<? if($pianta=="edera"){echo"mentreb";}else{echo"mentre";}?>">
<a class="<? if($pianta=="edera"){echo"menlinkb";}else{echo"menlink";}?>"
href="articolo-css-menu.php?pianta=edera">Edera</a>
</div>
<div class="<? if($pianta=="edera"){echo"menquab";}else{echo"menqua";}?>">
</div>
<div class="<? if($pianta=="menta"){echo"mendueb";}else{echo"mendue";}?>">
</div>
<div class="<? if($pianta=="menta"){echo"mentreb";}else{echo"mentre";}?>">
<a class="<? if($pianta=="menta"){echo"menlinkb";}else{echo"menlink";}?>" "
href="articolo-css-menu.php?pianta=menta">Menta</a>
</div>
<div class="<? if($pianta=="menta"){echo"menquab";}else{echo"menqua";}?>">
</div>
<div class="<? if($pianta=="salvia"){echo"mendueb";}else{echo"mendue";}?>">
</div>
<div class="<? if($pianta=="salvia"){echo"mentreb";}else{echo"mentre";}?>">
<a class="<? if($pianta=="salvia"){echo"menlinkb";}else{echo"menlink";}?>" "
href="articolo-css-menu.php?pianta=salvia">Salvia</a>
</div>
<div class="<? if($pianta=="salvia"){echo"menquab";}else{echo"menqua";}?>">
</div>
<div class="mencon">
<?
if($pianta=="edera"){
echo"<img src=\"edera.jpg\" style=\"float:left; border:0px; margin:3px;\" alt=\"edera\" />Il genere Hedera della
famiglia delle Apiaceae (già Araliaceae), comprende numerose specie, tra cui la comunissima Edera (Hedera helix)
pianta lianiforme rampicante sempreverde, odorosa e velenosa, di altezza variabile da 50 cm a 15 m, comune nei giardini
e nei nostri boschi dal mare al monte; ha fusti lignificati ramosi, aderisce facilmente al substrato grazie alle radici
avventizie aggrappanti, raccolte in tipici fascetti, le foglie sono lungamente picciolate, coriacee, intere di colore
verde scuro......";
}
elseif($pianta==menta){
echo"<img src=\"menta.jpg\" style=\"float:left; border:0px; margin:3px;\" alt=\"menta\" />La menta (genere Mentha) è
una pianta erbacea perenne, stolonifera, fortemente aromatica, che appartiene alla famiglia delle Labiate (Lamiaceae).
Cresce in modo massiccio in tutta Europa, in Asia e in Africa e predilige sia le posizioni in pieno sole che la mezza
ombra, ma può resistere anche a basse temperature. Molto conosciuta già dal tempo degli egizi e dei Romani, veniva
usata da Galeno come pianta medicinale.<br />
La menta, secondo la specie, è un'erba alta da qualche cm a poco più di un metro, con steli eretti e radici rizomatose
che si espandono notevolmente nel suolo.<br />
Le foglie sono opposte e semplici e nella maggior parte delle specie sono lanceolate e ricoperte di una leggera peluria
di colore verde brillante.<br />
I fiori sono raccolti in spighe terminali, coniche, che fioriscono a partire dal basso verso l'alto. I singoli fiori,
simpetali e irregolari, sono piccoli, di colore bianco, rosa o viola; la corolla, parzialmente fusa in un tubo, si apre
in due labbra, la superiore con un solo lobo, l'inferiore con 3 lobi disuguali. La fioritura avviene in piena estate e
prosegue fino all'autunno.<br />
Il frutto è una tetrachenio che contiene da 1 a 4 semi.......";
}
elseif($pianta==salvia){
echo"<img src=\"salvia.jpg\" style=\"float:left; border:0px; margin:3px;\" alt=\"salvia\" />Il genere Salvia
comprende diverse specie di piante odorose appartenenti alla famiglia delle Lamiacee, la stessa famiglia del timo e
della menta.<br />
In cucina è considerata una spezia....
";
}
else{
echo "Il regno delle Piante comprende circa 350.000 specie di organismi viventi, distinti comunemente con i nomi di
alberi, arbusti, cespugli, erbe, rampicanti, succulente, felci, muschi e molti altri ancora.<br />
La maggior parte delle piante esistenti e conosciute sono incluse nel gruppo delle Angiosperme (divisione Magnoliophyta)
, con circa 250.000 specie....";
}
?>
</div>
</div>
</body>
</html>
Immagini:
Per creare il box sono state utilizzate queste immagini:
