Ciao! Non potevo fare l'associale senza creare anch'io un menù dinamico. Il menù che ho creato è composto da 5 voci principali le quali, al passaggio del mouse, fanno apparire, per ognuna, alcune sotto categorie. Non è niente di troppo complesso però l'unica cosa bella è che grazie ad un briciolo di php quando si cambia pagina il menu (anche se è in javascript) mantiene aperte le sottocategorie della sezione cliccata.
Ciao!
Per completare l'opera aggiungete in una cartella le immagini:
back.gif e sf_menu1.gif che ho allegato.
Potete anche decidere di non usarle e non avrete l'effetto grafico.
Potete vedere il risultato in anteprima qui:
http://giovanicarrara.altervista.org/menu/menu1/
Ciao!
Ciao!
PHP:
<style type="text/css">
a{color:#ffff00;}
</style>
<?php
//QUESTO FA DI "HOME" LA SEZIONE DI DEFAULT####
if($_GET['cella'] == "")
{$_GET['cella'] = 1;}
//##########INIZIO CODICE JAVASCRIPT CON UN PO' DI PHP :-)
?>
<script type="text/javascript">
//##########CREO I SOTTOMENU CHE APPARIRANNO######
// ######ALL'ONMOUSEOVER DELLE VOCI PRINCIPALI###
// ############################################
var sottomenu1 = new String(" ");
var sottomenu2 = new String("<a href='?cella=2'>Pippo</a> | <a href='?cella=2'>Pluto</a> | <a href='?cella=2'>Gastone</a> | <a href='?cella=2'>Paperino</a>");
var sottomenu3 = new String("<a href='?cella=3'>Carbonara</a> | <a href='?cella=3'>Al pesto</a> | <a href='?cella=3'>Pomarola</a> | <a href='?cella=3'>In bianco</a>");
var sottomenu4 = new String("<a href='?cella=4'>Berl</a> | <a href='?cella=4'>Pro</a> | <a href='?cella=4'>Fassi</a> | <a href='?cella=4'>Bu, Berl's friend</a> ");
var sottomenu5 = new String("<a href='?cella=5'>Claudio</a> | <a href='?cella=5'>Franco</a> | <a href='?cella=5'>Ermenegildo</a> | <a href='?cella=5'>Alberto</a>");
//###################################################################
var asd = new Array();//############################################
asd[1] = (sottomenu1);// #################INDICIZZO################
asd[2] = (sottomenu2);// ###############IN UN ARRAY##############
asd[3] = (sottomenu3);// ##############I SOTTOMENU#############
asd[4] = (sottomenu4);// ###########PER RICHIAMARLI##########
asd[5] = (sottomenu5);// ###########IN BASE ALL'ID#########
// ################################
// ##############################
//##########################################################
//#########################################################
//############CREO UNA FUNZIONE#########
// ############CHE SOSTITUISCE#########
// #######L'IMMAGINE DELLE CELLE#####
// ######AL PASSAGGIO DEL MOUSE####
// ##############################
function changecolor(cella,color)
{
//CAMBIO LO SFONDO(POSSO ANCHE LASCIARLO TRASPARENTE
//BASTA NON INSERIRE L'IMMAGINE NELLA CARTELLA "IMAGES"
document.getElementById("cella" + cella).style.backgroundImage='url("images/back.gif")';
//RIPETO LO SFONDO(O ANCHE NO A SECONDA DI COSA VOGLIO FARE)
document.getElementById("cella" + cella).style.backgroundRepeat='repeat';
//CAMBIO IL COLORE DEL FONT
document.getElementById("cella" + cella).style.color=(color);
//###FACCIO APPARIRE IL SOTTOMENU' GRAZIE ALL'ARRAY
document.getElementById("sottomenu").innerHTML=(asd [cella]);
//##########CREO UN CICLO###########
// #####CHE CAMBIA LO SFONDO#######
// #####A TUTTE LE CELLE TRANNE##
// #####CHE A QUELLA SCELTA#####
// #####AFFINCHE'LASCIATA######
// ##LA VOCE E PRESA UN'ALTRA##
// ######CONTINUI L'EFFETTO####
for(i=1 ; i<=5 ; i++)
{
if(cella != i)
{
//CAMBIO LO SFONDO
document.getElementById("cella" + i).style.backgroundImage='url("images/sf_menu1.gif")';
//RIPETO LO SFONDO
document.getElementById("cella" + i).style.backgroundRepeat='repeat';
//CAMBIO IL COLORE DEL FONT
document.getElementById("cella" + i).style.color=("#383838");
}
}
}
//CAMBIO LO SFONDO DELLA CELLA DELLA VOCE PRINCIPALE
//GRAZIE ALLA VARIABILE GET "cella"
function bg_default(cella)
{
document.getElementById("cella" + cella).style.color=("#ffff00");
document.getElementById("cella" + cella).style.backgroundImage='url(images/back.gif)';
document.getElementById("cella" + cella).style.backgroundRepeat='repeat';
document.getElementById("sottomenu").innerHTML=(asd[<?php echo $_GET['cella']; ?>]);
}
//####################FINE CODICE JAVASCRIPT#########################################################
</script>
<body onload='bg_default(<?php echo $_GET['cella']; ?>);'>
<table cellpadding="0" cellspacing="0">
<tr>
<td onMouseOver='changecolor(1,"#ffff00");' id="cella1" style="background-image:url('images/sf_menu1.gif')">
<div onclick="location.href='index.php'" style="cursor:pointer;">
Home
</div>
<td align="center" width="100" height="20" onMouseOver='changecolor(2,"#ffff00");' id="cella2" style="background-image:url('images/sf_menu1.gif')">
<div style="cursor:pointer;">
Cartoons
</div>
<td align="center" width="100" height="20" onMouseOver='changecolor(3,"#ffff00");' id="cella3" style="background-image:url('images/sf_menu1.gif')">
<div style="cursor:pointer;">
Primi piatti
</div>
<td align="center" width="100" height="20" onMouseOver='changecolor(4,"#ffff00");' id="cella4" style="background-image:url('images/sf_menu1.gif')">
<div style="cursor:pointer;">
Animali
</div>
<td align="center" width="120" height="20" onMouseOver='changecolor(5,"#ffff00");' id="cella5" style="background-image:url('images/sf_menu1.gif')">
<div style="cursor:pointer;">
Nomi
</div>
</table>
<div id="sottomenu" style="background-image:url('images/back.gif');color:#ffff00;"> </div>back.gif e sf_menu1.gif che ho allegato.
Potete anche decidere di non usarle e non avrete l'effetto grafico.
Potete vedere il risultato in anteprima qui:
http://giovanicarrara.altervista.org/menu/menu1/
Ciao!
Ultima modifica: