Menu déroulant

Résolu
mano2003 Messages postés 51 Statut Membre -  
mano2003 Messages postés 51 Statut Membre -
Bonjour,
je travaille sur sur un projet de site web et dans le projet il est dit qu'il faut créer des menus qui affiche des sous-menus et je sais vraiment pas comment le faire. sur google j'ai vu des codes js qui affiche les sous-menus au passage de la souris mais nous on nous demande pas ca alor svp j'ai besoin de votre aide chers amis pour ce code!! merci!
Configuration: Windows
Firefox 3.0.11

5 réponses

  1. diice Messages postés 131 Date d'inscription   Statut Membre Dernière intervention   1
     
    on vous demande quoi exactement ?

    sinon tu peux utiliser les <ul> et <li> pour tout afficher d'un coup avec menu et sous menu
    0
  2. mano2003 Messages postés 51 Statut Membre 3
     
    voici le code de mon menu. j'ai utilisé du css mais avec ce code tout s'affiche en même temps.

    <div class="menuhaut">A voir sur mon site</div>
    <ul class="menu">
    <li> <a href="#">Rubrique</a>
    <ul>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>

    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    </ul>
    </li>
    <li><a href="#">Rubrique</a>
    <ul>
    <li><a href="#">Lien</a></li>

    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    </ul>
    </li>
    <li><a href="#">Rubrique</a>
    <ul>

    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    </ul>
    </li>
    <li><a href="#">Rubrique</a>

    <ul>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    </ul>
    </li>

    <li><a href="#">Rubrique</a>
    <ul>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>

    </ul>
    </li>
    <li><a href="#">Rubrique</a>
    <ul>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>

    <li><a href="#">Lien</a></li>
    </ul>
    </li>
    </ul>
    0
  3. diice Messages postés 131 Date d'inscription   Statut Membre Dernière intervention   1
     
    tu peux cacher certaines div ou li et en cliquant sur le theme les faire apparaitre en css.

    avec un peu de javascript dans le <head>
    function visibilite(thingId)
    {
    	var targetElement;
    	targetElement = document.getElementById(thingId) ;
    	if (targetElement.style.display == "none")
    	{
    		targetElement.style.display = "inline";
    	}
    	else
    	{
    		targetElement.style.display = "none" ;
    	}
    }
    


    puis dans ta page :
    <a href="javascript:visibilite('nomDivduSousMenu')">Titre menu</a>
    <DIV id="nomDivduSousMenu" style='display:none;'>sous menu ou contenu</div>
    


    exemple avec ton code :

    <li><a href="javascript:visibilite('nomDivduSousMenu')">Rubrique</a>
    
    <DIV id="nomDivduSousMenu" style='display:none;'>
    <ul>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li> 
    </ul>
    </div>
    </li> 
    
    0
  4. mano2003 Messages postés 51 Statut Membre 3
     
    merci diice mais ca marche toujours pas
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. diice Messages postés 131 Date d'inscription   Statut Membre Dernière intervention   1
     
    Qu'est-ce qui marche pas exactement ??

    en faisant ca comme ça ca marche chez moi :
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <script>
    function visibilite(thingId)
    {
    	var targetElement;
    	targetElement = document.getElementById(thingId) ;
    	if (targetElement.style.display == "none")
    	{
    		targetElement.style.display = "inline";
    	}
    	else
    	{
    		targetElement.style.display = "none" ;
    	}
    }
    
    </script>
    </head>
    
    <body>
    <div class="menuhaut">A voir sur mon site</div>
    <ul class="menu">
    <li><a href="javascript:visibilite('nomDivduSousMenu1')">Rubrique</a>
    <div id="nomDivduSousMenu1" style="display:none;">
    <ul>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    </ul>
    </div>
    </li>
    <li><a href="javascript:visibilite('nomDivduSousMenu2')">Rubrique</a>
    <div id="nomDivduSousMenu2" style="display:none;"><ul>
    <li><a href="#">Lien</a></li>
    
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    </ul>
    </div>
    </li>
    <li><a href="javascript:visibilite('nomDivduSousMenu3')">Rubrique</a>
    <div id="nomDivduSousMenu3" style="display:none;"><ul>
    
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    </ul>
    </div>
    </li>
    <li><a href="javascript:visibilite('nomDivduSousMenu4')">Rubrique</a>
    <div id="nomDivduSousMenu4" style="display:none;">
    <ul>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    </ul></div>
    </li>
    
    <li><a href="javascript:visibilite('nomDivduSousMenu5')">Rubrique</a>
    <div id="nomDivduSousMenu5" style="display:none;"><ul>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    
    </ul></div>
    </li>
    <li><a href="javascript:visibilite('nomDivduSousMenu6')">Rubrique</a>
    <div id="nomDivduSousMenu6" style="display:none;"><ul>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    
    <li><a href="#">Lien</a></li>
    </ul></div>
    </li>
    </ul>
     
    </body>
    </html>
    
    0
    1. mano2003 Messages postés 51 Statut Membre 3
       
      voila!! ca marche parfaitement !!! un grand merci diice tu viens de me sauver la vie !!!
      0