menu dynamique déroulant

Bonjour à tous,
Je souhaiterais inclure un menu déroulant sur mon site PHP/MySQL. On m'a dit que c'était assez facile à faire avec Javascript, mais comme je rame, et ben je galère pas mal...

J'ai trouvé plusieurs menus déroulant ici mais je n'en ai pas trouvé un dynamique.

Alors je vais expliquer en détail. Le menu est créé dynamiquement et pourra changer car il dépend des rubriques qu'insérera l'administrateur du site que je suis en train de concevoir.
Ce menu est conçu de rubriques et de sous rubriques, qui créé un menu du type de celui-ci:

TITRE1
   SOUSTITRE1
   SOUSTITRE2
   SOUSTITRE3
TITRE2
   SOUSTITRE1
   SOUSTITRE2
TITRE3
TITRE4
   SOUSTITRE1
   SOUSTITRE2

Si ça peut aider, je vous montre le code du fichier menu.html


[CODE]<div id="menuGeneral">
            <dl id="menu">
            <THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" profondeur="1" classement="manuel">
                <dt><a href="#URL">#TITRE</a></dt>
                <dd class="ssmenu">
                    <ul>
                    <THELIA_BLOC_SOUS_MENU type="RUBRIQUE" parent="#ID">
                    <THELIA_SOUS_MENU_RUBRIQUE type="RUBRIQUE" id="#ID" courante="0">
                        <li><a href="#URL">#TITRE</a></li>
                    </THELIA_SOUS_MENU_RUBRIQUE>    
                    <THELIA_SOUS_MENU_RUBRIQUE_SELECTION type="RUBRIQUE" id="#ID" courante="1">
                        <li><a href="#URL" class="selected">#TITRE</a></li>
                    </THELIA_SOUS_MENU_RUBRIQUE_SELECTION>
                    </THELIA_BLOC_SOUS_MENU>
                        <li class="invisibleW3C">&nbsp;</li>    
                    </ul>
                </dd>
                </THELIA_MENU_RUBRIQUES>
                <THELIA_MENU_CONTENU type="CONTENU" parent="0" profondeur="1" classement="manuel">
                <dt><a href="#URL">#TITRE</a></dt>
            </THELIA_MENU_CONTENU>
            </dl>
        </div>[/CODE]

Voila le but est d'obtenir un menu du genre:

TITRE1
TITRE2
TITRE3
TITRE4

et, par exemple qu'au passage de la souris du TITRE2, on obtienne:

TITRE1
TITRE2
   SOUSTITRE1
   SOUSTITRE2
TITRE3
TITRE4

Voilà, je remercie par avance ceux qui voudront bien me filer un coup de main...

Ajor

Salut,

pour que tes sous menu s'affichent au passage de la souris sur le menu utilise l'évènement css "hover" et la propriété "display" !!!

a++

Si la réponse vous convient, pensez : Réponse accèpté !
Un forum...

 				 						Merci!

Je suis vraiment débutant en Javascript, donc j'ai besoin d'un petit peu d'aide pour utiliser ces fonctions
Si j'ai bien compris, je place le code suivant au début de ma page:


<script 						type="text/javascript"> 				
 				 						<!--
/******** Debut du script du menu ************/
var timer = null;
var objOut = null;
 
function mouseOut(obj)
{
   var elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "none";

   document.getElementById(obj.id+"Titre").className="titreMenu itemOut";
 
   //instruction a placer a la fin de la fonction
   timer = null;
}
 
function fout(obj)
{
   objOut = obj;
   if (timer==null)
   {
      timer = setTimeout("mouseOut(objOut)","1000");
   }
}
 
 
function fover(obj)
{
   var elmt;
   clearTimeout(timer);
   timer = null;
 
   elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "block";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOver";
 
   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}
/******** Fin du script du menu ************/
//--> 				 				
 				 						</script>


Puis je place dans le code (copié plus haut) quelque chose comme ça:

 				 				 						<div 						class="menu"id="Menu1"onmouseout="fout(this)"onmouseover="fover(this)"> 				
 				 						<div 						class="titreMenu itemOut"id="Menu1Titre">Menu 1</div>


<divclass="contenuMenu"id="Menu1Item">
<divclass="itemOut"onmouseout="this.className='itemOut'"onmouseover="this.className='itemOver'"><ahref="#"class="lienMenu">Sous menu 11</a></div>
  </div>


J'ai du mal à savoir comment adapter ce code au miens.
Mais déjà, est-ce que c'est vraiment faisable?
Ajor

c'est tout a fait possible !

essai ce code et si ça ne marche pas, dit nous les erreurs que tu as !

a++

Si la réponse vous convient, pensez : réponse accèpté !
Un forum...

Bonjour à tous,

Alors j'ai essayé plusieurs trucs, mais je n'y arrive pas...

Voici le code de mon menu:

[CODE]<!-- menu général-->

<script type="text/javascript">                
<!--
/******** Debut du script du menu ************/
var timer = null;
var objOut = null;
 
function mouseOut(obj)
{
   var elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "none";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOut";
 
   //instruction a placer a la fin de la fonction
   timer = null;
}
 
function fout(obj)
{
   objOut = obj;
   if (timer==null)
   {
      timer = setTimeout("mouseOut(objOut)","1000");
   }
}
 
 
function fover(obj)
{
   var elmt;
   clearTimeout(timer);
   timer = null;
 
   elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "block";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOver";
 
   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}
/******** Fin du script du menu ************/
//-->                                 
</script>


        <div id="menuGeneral">
            <dl id="menu">
            <THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" profondeur="1" classement="manuel">
                <dt><a href="#URL">#TITRE</a></dt>
                <dd class="ssmenu">
                    <ul>
                   
                    <THELIA_BLOC_SOUS_MENU type="RUBRIQUE" parent="#ID" onmouseout="fout(this) "onmouseover="fover(this)">
                   
                    <THELIA_SOUS_MENU_RUBRIQUE type="RUBRIQUE" id="#ID" courante="0" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'">
                    <li><a href="#URL">#TITRE</a></li>
                    </THELIA_SOUS_MENU_RUBRIQUE>
                   
                       
                    <THELIA_SOUS_MENU_RUBRIQUE_SELECTION type="RUBRIQUE" id="#ID" courante="1">
                        <li><a href="#URL" class="selected">#TITRE</a></li>
                    </THELIA_SOUS_MENU_RUBRIQUE_SELECTION>
                   
                    </THELIA_BLOC_SOUS_MENU>
                        <li class="invisibleW3C">&nbsp;</li>   
                       
                    </ul>
                </dd>
                </THELIA_MENU_RUBRIQUES>
                <THELIA_MENU_CONTENU type="CONTENU" parent="0" profondeur="1" classement="manuel">
                <dt><a href="#URL">#TITRE</a></dt>
            </THELIA_MENU_CONTENU>
            </dl>
        </div>[/CODE]

Les sous menus ne disparaissent pas, et je ne comprend pas pourquoi...
Ce code ne produit aucun changement sur le résultat (comparé au code de mon premier post)

ba je vois pas, tu m'a embrouillé, je ne connais pas les balises THELIA_MENU_CONTENU etc...

a++

Si la réponse vous convient, pensez : Réponse accepté !

Il me semble que ce sont des balises HTML qui respectent le standard XHTML

Au début de ma page j'ai ça:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

je ne sais pas, ce n'ai pas répertorié dans les balises xhtml valides !

a++

Si la réponse vous convient, pensez : Réponse accepté !