[Résolu] Problème menu-déroulant

Bonjour tout le monde, je suis entrain de faire mon menu en cascade en faisant appel à la puissance du javascript! Mais j'ai quelques petits soucis.

(Je tiens à preciser que je suis un "novice").

Tout dabord je vous invite à vous rendre sur cette page: ICI

Il n'y a qu'un sous-menu qui s'affiche lorsque l'on clique sur n'importe qu'elle bouton du menu principal, c'est le sous-menu (Nous contacter). Voici une partie du code lié au menu:

Partie Javascript:

	function java_sousmenu( ){
 		var Obj = document.getElementById( 'sous_menu_presentation'&&'sous_menu_portfolio'&&'sous_menu_nosservices'&&'sous_menu_contacter');
  		if(Obj)
   		Obj.style.visibility = "visible";
	}

Partie xHtml (concerne les deux premiers boutons du menu):

          <li id="panel2b">
            <a href="#" onClick="java_sousmenu();"></a>
          </li>
		  
          <li id="panel3b">
            <a href="#" onClick="java_sousmenu();"></a>
          </li>

On m'a dit de passer l'objet courant en parametre car le if serrait toujours considéré comme valide. J'ai bien compris le contexte du problème mais je ne sais pas comment faire...

Pourriez-vous m'aider ?
Modifié par shakuro (16 Dec 2010 - 15:27)

Salut shakuro,

Il faut que tu fasses comme ça :

         <li id="panel2b"> 
            <a href="java_sousmenu('sous_menu_presentation');"></a> 
          </li> 
           
          <li id="panel3b"> 
            <a href="java_sousmenu('sous_menu_portfolio');"></a> 
          </li>

Et pour le javascript :

    function java_sousmenu(id){ 
         var Obj = document.getElementById(id); 
          if(Obj) 
           Obj.style.visibility = "visible"; 
    }

Merci Hchtot pour ta réponse,

Es-tu sûr que sa ne soit pas:

          <li id="panel1b">
            <a href="#" onClick="java_sousmenu('sous_menu_presentation');"></a>
          </li>
 
		  <li id="panel2b">  
            <a href="#" onClick="java_sousmenu('sous_menu_portfolio');"></a>  
          </li>  

? car tu sembles avoir mis du code java dans le href directement, relis ton code ^^.

Si t-elle est le cas, voila se que cela donne: ICI

Si vous appuyez sur chaque bouton du menu principal dans l'ordre (de gauche à droite) tout les sous-menus s'affichent. Hors si vous souhaitez cliquez sur un bouton du menu antérieur à celui du sous-menu actif, rien ne se passe.

Je vous invite à essayer car c'est pas facile à expliquer. Je pense que le javascript devrait palié à ça une nouvelle fois.

PS: J'avais déjà réalisé ceci mais au vu du problème qui se pose, j'avais opté pour un autre code, mais qui marchait encore moins bien ^^.
Modifié par shakuro (16 Dec 2010 - 13:27)

Non, non, tu peux appeler une fonction javascript directement dans le href. Ça évite d'utiliser onclick.

Il faut que tu caches tous tes sous-menus avant d'afficher celui sur lequel tu as cliqué :

    function java_sousmenu(id){  
         document.getElementById("sous_menu_presentation").style.visibility = "hidden";
         document.getElementById("sous_menu_portfolio").style.visibility = "hidden";
         document.getElementById("sous_menu_nosservices").style.visibility = "hidden";
         document.getElementById("sous_menu_contacter").style.visibility = "hidden";
         var Obj = document.getElementById(id); 
         Obj.style.visibility = "visible";  
    } 

Normalement il faudrait donner une class aux div qui contiennent les sous-menus et ensuite les cacher en utilisant getElementByClass mais il me semble que c'est un peu compliqué. Y'aurait moyen de faire ça beaucoup plus simplement avec Jquery. En attendant la solution que je viens de te donner doit fonctionner.
Modifié par hchtot (16 Dec 2010 - 14:12)

Merci beaucoup,

Tu avais oublié le:"javascript:" dans ton href:

		  <li id="panel2b">  
            <a href="javascript:java_sousmenu('sous_menu_presentation');"></a>  
          </li>  
            
          <li id="panel3b">  
            <a href="javascript:java_sousmenu('sous_menu_portfolio');"></a>  
          </li> 

Enfaite toi tu a appelé directement le style attribué à l'id de chaque sous-menu, le style visibility: hidden directement depuis la fonction (dans le code js).

Alors que moi j'avais appliqué le "visbility: hidden" sur la feuille de style css externe (visible ICI) de la page web, comme ceci:

#sous_menu_presentation {
	visibility: hidden;
	border: none;
	width:100%;
	height:21px;
	padding: 0; 
	background-image:url(http://peexstudio.fr/menu_presentation.png);
    background-repeat:repeat-x;
	position: absolute;
	top: 218px
	}

#sous_menu_portfolio {
	visibility: hidden;
	width:100%;
	height:21px;
	padding: 0; 
	background-image:url(http://peexstudio.fr/menu_portfolio.png);
    background-repeat:repeat-x;
	position: absolute;
	top: 218px
	}

En tout cas ton code semble fonctionner même si le "pourquoi?" perdure dans ma tête.

Resultat: ICI

Merci hchtot d'avoir pris le temps de répondre à mon problème, c'est cool
Modifié par shakuro (16 Dec 2010 - 15:04)

En fait il faut faire les deux. Tu caches d'abord tous les sous-menu en css pour qu'ils n'apparaissent pas quand tu arrives sur la page, puis quand tu cliques sur un des menus, tu les caches à nouveau (en js) au cas où un des sous-menu aurait déjà été cliqué. Et pour finir, tu affiches celui sur lequel tu as cliqué.

Y'a pas quoi ! Bonne continuation.