Menu dinamico con selezione di default

metalgemini

Utente Attivo
14 Apr 2004
745
0
0
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!
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("&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!
 

Allegati

  • back.gif
    back.gif
    807 bytes · Visite: 387
  • sf_menu1.gif
    sf_menu1.gif
    807 bytes · Visite: 370
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
C Creazione Menu dinamico con Checkbox PHP 0
J menu dinamico a tendina con database PHP 13
K Menu dinamico con file .css ASP.NET 1
P menu dinamico con PHP PHP 0
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
V Menu a tendina dinamico in php PHP 7
V menu dinamico PHP 10
S Menu' dinamico PHP 3
B creare menu dinamico Webdesign e Grafica 2
F Menu dinamico e xml XML 1
A menu dinamico scorrevole Flash 0
N Menu A Cascata Dinamico PHP 0
F Menu responsive larghezza schermo HTML e CSS 2
G Colorare menu select attraverso ricerca php PHP 0
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
Hellgrom90 Hamburger menu non si chiude jQuery 1
K [Javascript] Finestra menu Javascript 1
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5

Discussioni simili