Menu dinamico con selezione di default

[metalgemini]

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!

<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("&nbsp;");
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;">&nbsp;</div>

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!