Problème avec mon menu déroulant jquery

Bonjour

Je me permets de faire appel à vous car j'ai un soucis avec mon menu déroulant. J'ai suivi le tutoriel présent sur le site "menu en accordeon avec jquery". mais le soucis c'est que mes sous menus ne sont pas cachés par défaut. Si quelques pouvait m'aider ca serait cool

Voici mon code js

	<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus :
    $("ul#menu_principal li.toggleSubMenu ul.sous_menu").hide();
     } ) ;

    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".menu ul#menu_principal li.toggleSubMenu > a").onmouseover( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.sous_menu:visible").length != 0) {
            $(this).next("ul.sous_menu").slideUp("normal");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $("ul#menu_principal ul.sous_menu").slideUp("normal");
            $(this).next("ul.sous_menu").slideDown("normal");
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });    


} ) ;
// -->
</script>  

voici mon code html

 <div class="menu">
        	<ul id="menu_principal">
            	<li class="toggleSubMenu"><a href="#">Accueil</a></li>
                <li class="toggleSubMenu"><a href="#">Economie</a></li>
                	<div class="level2">
                    	<ul class="sous_menu">
                        	<li><a href="#" title="">Coordonnées des entreprises</a></li>
                            <li><a href="#" title="">Compte entreprise</a></li>
                            <li><a href="#" title="">Observatoire économique</a></li>
                            <li><a href="#" title="">Ressources documentaires</a></li>
                            <li><a href="#" title="">Commander</a></li>
                            <li><a href="#" title="">Télécharger</a></li>
                            <li><a href="#" title="">Actualités entreprises</a></li>
                        </ul>
                     </div>
                    
                <li class="toggleSubMenu"><a href="#">La CCI et son territoire</a></li>
                	<div class="level2">
                    	<ul class="sous_menu">
                        	<li><a href="#" title="">La CCI s'exprime</a></li>
                            <li><a href="#" title="">La CCI, une équipe, des missions</a></li>
                            <li><a href="#" title="">Grenoble, un territoire innovant</a></li>
                        </ul>
                    </div>
                    
                <li class="toggleSubMenu"><a href="#">La CCI à votre service</a></li>
                	<div class="level2">
                    	<ul class="sous_menu">
                        	<li><a href="#" title="">Créer / Reprendre</a></li>
                            <li><a href="#" title="">Entreprises et économie</a></li>
                            <li><a href="#" title="">Industrie</a></li>
                            <li><a href="#" title="">Commerce</a></li>
                            <li><a href="#" title="">International</a></li>
                            <li><a href="#" title="">Formations, emplois et stages</a></li>
                            <li><a href="#" title="">International</a></li>
                            <li><a href="#" title="">Formations, emplois et stages</a></li>
                            <li><a href="#" title="">Aides et accompagnement</a></li>
                            <li><a href="#" title="">Démarches administratives</a></li>
                        </ul>
                    </div>
                   
                <li class="toggleSubMenu" id="dernier_item"><a href="#">Webmag CCI</a></li>
                	<div class="level2">
                    	<ul class="sous_menu">
                        	<li><a href="#" title="">A la Une</a></li>
                            <li><a href="#" title="">A ne pas manquer</a></li>
                            <li><a href="#" title="">Web TV</a></li>
                            <li><a href="#" title="">Salle de presse</a></li>
                        </ul>
                    </div>
                   
            </ul>
        </div>

merci de votre aide

Bonjour dedel53chipie,

Il sort d'où ce ?

<div class="level2">

Outre le fait que tu ne peux pas avoir de balise div directement dans une balise ul, je ne vois pas l'utilité de ce rajout malheureux
Je t'encourage à faire une nouvelle lecture du tutoriel (notamment la base html)

Cdt,
Sylvain

je viens de l'enlever car en effet il n'avait rien à y faire J'ai aussi que ma li qui contient le ul était mal fermée mais le problème reste identique

Salut,

Le pb vient essentiellement de ton code HTML qui n'est pas valide. Tu fermes les balises <li> avant d'y inserer les listes <ul>

Avec ce code HTML ca passe normalement :

<div class="menu">
          <ul id="menu_principal">
              <li class="toggleSubMenu"><a href="#">Accueil</a></li>
                <li class="toggleSubMenu"><a href="#">Economie</a>
                      <ul class="sous_menu">
                          <li><a href="#" title="">Coordonnées des entreprises</a></li>
                            <li><a href="#" title="">Compte entreprise</a></li>
                            <li><a href="#" title="">Observatoire économique</a></li>
                            <li><a href="#" title="">Ressources documentaires</a></li>
                            <li><a href="#" title="">Commander</a></li>
                            <li><a href="#" title="">Télécharger</a></li>
                            <li><a href="#" title="">Actualités entreprises</a></li>
                        </ul>
</li>

                <li class="toggleSubMenu"><a href="#">La CCI et son territoire</a>
                      <ul class="sous_menu">
                          <li><a href="#" title="">La CCI s'exprime</a></li>
                            <li><a href="#" title="">La CCI, une équipe, des missions</a></li>
                            <li><a href="#" title="">Grenoble, un territoire innovant</a></li>
                        </ul>
</li>

               <li class="toggleSubMenu"><a href="#">La CCI à votre service</a>
                      <ul class="sous_menu">
                          <li><a href="#" title="">Créer / Reprendre</a></li>
                            <li><a href="#" title="">Entreprises et économie</a></li>
                            <li><a href="#" title="">Industrie</a></li>
                            <li><a href="#" title="">Commerce</a></li>
                            <li><a href="#" title="">International</a></li>
                            <li><a href="#" title="">Formations, emplois et stages</a></li>
                            <li><a href="#" title="">International</a></li>
                            <li><a href="#" title="">Formations, emplois et stages</a></li>
                            <li><a href="#" title="">Aides et accompagnement</a></li>
                            <li><a href="#" title="">Démarches administratives</a></li>
                        </ul>
</li>

                <li class="toggleSubMenu" id="dernier_item"><a href="#">Webmag CCI</a>
                      <ul class="sous_menu">
                          <li><a href="#" title="">A la Une</a></li>
                            <li><a href="#" title="">A ne pas manquer</a></li>
                            <li><a href="#" title="">Web TV</a></li>
                            <li><a href="#" title="">Salle de presse</a></li>
                        </ul>
</li>

            </ul>
        </div>

Tu as aussi quelques erreurs dans ton code jQuery le onmouseover javascript est remplace par la fonction hover jQuery :

$(document).ready( function () {
    // On cache les sous-menus :
    $("ul#menu_principal li.toggleSubMenu ul.sous_menu").hide();

    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".menu ul#menu_principal li.toggleSubMenu > a").hover( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.sous_menu:visible").length != 0) {
            $(this).next("ul.sous_menu").slideUp("normal");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $("ul#menu_principal ul.sous_menu").slideUp("normal");
            $(this).next("ul.sous_menu").slideDown("normal");
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });


} ) ;

mes menus se cachent bien maintenant (merci). par contre mes liens cliquables ont disparu sur le niveau un et mes sous menus ne se replient pas et ca je ne comprends vraiment pas pourquoi

voici mon code

	<script type="text/javascript">

$(document).ready( function () {
    // On cache les sous-menus :
    $("ul.menu_principal ul.sous_menu").hide();
    // On modifie l'évènement "click" sur les liens dans les items de liste

    // qui portent la classe "toggleSubMenu" :

    $("ul.menu_principal li.toggleSubMenu > a").hover( function () {

        // Si le sous-menu était déjà ouvert, on le referme :

        if ($(this).next("ul.sous_menu:visible").length != 0) {

            $(this).next("ul.sous_menu").slideUp("normal");

        }

        // Si le sous-menu est caché, on ferme les autres et on l'affiche :

        else {

            $("ul.menu_principal ul.sous_menu").slideUp("normal");

            $(this).next("ul.sous_menu").slideDown("normal");

        }

        // On empêche le navigateur de suivre le lien :

        return false;

    });

} ) ;



</script> 

merci pour votre réponse

Re,

Je t'encourage derechef à relire le tutoriel

Pourquoi affubler de la classe "toggleSubMenu" les éléments de liste ne comportant pas de sous-menu (ne nécessitant donc pas d'apparaitre/disparaitre ) ?
Ce lien déclencheur d'ailleurs, c'est un lien vide ?
Cette partie du tutoriel était pourtant assez interessante d'un point de vue accessibilité :

a écrit :

Transformer les span en liens

Il est possible de faire réagir les éléments de liste au clic pour faire apparaître les sous-menus, comme n'importe quel élément HTML. Le problème est que les éléments de liste ne captent pas le focus lorsque l'utilisateur navigue au clavier, contrairement aux liens.

Evidemment, on pourrait utiliser directement un lien, avec un attribut href vide. Mais dans ce cas, on se retrouve avec un lien inutile si JavaScript est désactivé.

Pour obtenir un résultat aussi accessible et ergonomique que possible (pour un menu déroulant), j'ai choisi de générer des liens à l'aide de JavaScript. Ainsi, le code HTML reste propre et le menu devient utilisable au clavier.

La partie en gras et bleue m'amène à une dernière remarque, sur le choix de gérer cet évènement au "survol" plutôt qu'au "clic" :
- Ce n'est pas réellement judicieux d'un point de vue ergonomique (tes visiteurs ont des habitudes de surf...) lorsque tu quittes cette position de survol, que se passe t-il ? La manipulation à la souris avec un "élément qui bouge" peut réellement être perturbante, si ce n'est rédhibitoire...
Pour reprendre une phrase célèbre du poète méconnu FV :

FV a écrit :
Cela va rendre l'usage du menu soit un peu chiant, soit très très chiant. Dans les deux cas, les utilisateurs vont être contents; il est bien connu qu'ils aiment les sites chiants

- last but not least:

l'auteur himself a écrit :
Tu vas perdre un des principaux avantages de ce menu, qui est la navigabilité au clavier

A prendre en compte, non ?

Cdt,
Sylvain

bon j'ai fait mon code html et mon css maintenant reste àgaire l'effet over pour faire apparaitre mes sous-menus
une ame charitable veut elle bien m'aider car là je patauge enormément

merci par avance

<ul class="menu_principal">
            	<li><a href="#">Accueil</a></li>
                <li><a href="#">Economie</a>
                	
                    	<ul class="sous_menu1">
                        	<li><a href="#" title="">Coordonnées des entreprises</a></li>
                            <li><a href="#" title="">Compte entreprise</a></li>
                            <li><a href="#" title="">Observatoire économique</a></li>
                            <li><a href="#" title="">Ressources documentaires</a></li>
                            <li><a href="#" title="">Commander</a></li>
                            <li><a href="#" title="">Télécharger</a></li>
                            <li><a href="#" title="">Actualités entreprises</a></li>
                        </ul>
                    
                  </li>
                     
                    
                <li><a href="#">La CCI et son territoire</a>
                	
                    	<ul class="sous_menu2">
                        	<li><a href="#" title="">La CCI s'exprime</a></li>
                            <li><a href="#" title="">La CCI, une équipe, des missions</a></li>
                            <li><a href="#" title="">Grenoble, un territoire innovant</a></li>
                        </ul>
                 	
                </li>   
                <li><a href="#">La CCI à votre service</a>
                	
                    	<ul class="sous_menu3">
                        	<li><a href="#" title="">Créer / Reprendre</a></li>
                            <li><a href="#" title="">Entreprises et économie</a></li>
                            <li><a href="#" title="">Industrie</a></li>
                            <li><a href="#" title="">Commerce</a></li>
                            <li><a href="#" title="">International</a></li>
                            <li><a href="#" title="">Formations, emplois et stages</a></li>
                            <li><a href="#" title="">Aides et accompagnement</a></li>
                            <li><a href="#" title="">Démarches administratives</a></li>
                        </ul>
                   
                 </li>  
                <li id="dernier_item"><a href="#">Webmag CCI</a>
                	
                    	<ul class="sous_menu4 position_menu4">
                        	<li><a href="#" title="">A la Une</a></li>
                            <li><a href="#" title="">A ne pas manquer</a></li>
                            <li><a href="#" title="">Web TV</a></li>
                            <li><a href="#" title="">Salle de presse</a></li>
                        </ul>
                  
                </li>   
            </ul>

Le plus simple à mon gout pour faire un hover sur des listes reste le css.
Ca ressemblerait à un truc dans ce genre

ul.menu_principal li ul{
  display: none;
}

ul.menu_principal li:hover > ul{
  display: block;
}

Si tu tiens absolument à le faire avec jQuery, tu peux tenter

$(document).ready(function(){
  $('ul.menu_principal li').hover(function(){
    $(this).children('ul').show();
  }, function(){
    $(this).children('ul').hide();
  });
});

Bien le bonjour à tous,
Bon j'ai un problème avec mon menu.
Tout d'abord j'ai suivi à la lettre le tuto mais quand je finis, les sous menu sont caché et je ne peux pas les voir quand je veux les faire apparaitre.
Ensuite pas moyen de le mettre en ligne c'est à dire que le menu soit horizontal et non vertical.
voila le code java que j'ai mis dans le header comme demander:

<script type="text/javascript" src="jquery-1.2.1.js"></script>

<script type="text/javascript">
<!--
$(document).ready( function () {

    // On cache les sous-menus :
    $(".navigation ul.subMenu").hide();    
} ) ;
// -->
</script>

<script type="text/javascript" src="jquery-1.2.1.js"></script>

<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus :
    $(".navigation ul.subMenu").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"

    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".navigation li.toggleSubMenu span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;    

} ) ;
// -->
</script>

<script type="text/javascript" src="jquery-1.2.1.js"></script>

<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus :
    $(".navigation ul.subMenu").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"

    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".navigation li.toggleSubMenu span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith(&#039;<a href="" title="Afficher le sous-menu">&#039; + TexteSpan + &#039;<\/a>&#039;) ;
    } ) ;

    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal");
            $(this).next("ul.subMenu").slideDown("normal");
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });    


} ) ;
// -->
</script>

<script type="text/javascript" src="jquery-1.2.1.js"></script>    


<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus :
    $(".navigation ul.subMenu").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"
    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".navigation li.toggleSubMenu span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith(&#039;<a href="" title="Afficher le sous-menu">&#039; + TexteSpan + &#039;<\/a>&#039;) ;
    } ) ;

    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });
} ) ;
// -->

</script>

<script type="text/javascript" src="jquery-1.2.1.js"></script>    
<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $(".navigation ul.subMenu:not('.open_at_load')").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"

    // et on remplace l'élément span qu&#039;ils contiennent par un lien :
    $(".navigation li.toggleSubMenu span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith(&#039;<a href="" title="Afficher le sous-menu">&#039; + TexteSpan + &#039;<\/a>&#039;) ;
    } ) ;

    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });

} ) ;
// -->

</script>

Voici le code HTML:

<ul class="navigation">
			<li><a href="#" title="Accueil">Accueil</a></li>
			<li><a href="#" title="Forum">Forum</a></li>
			<li class="toggleSubMenu"><span>Membres</span>
				<ul class="subMenu">
					<li><a href="#" title="Fiche de Thex O'niell">Thex</a></li>
					<li><a href="#" title="Fiche de Christopher Jordain">Christopher</a></li>
					<li><a href="#" title="Fiche de Tamara Prescot">Tamara</a></li>
					<li><a href="#" title="Fiche de Adriendo Vaudé">Adriendo</a></li>
					<li><a href="#" title="Fiche de Kevin Lorn">Kevin</a></li>
				</ul>
			</li>
			<li class="toggleSubMenu"><span>le club</span>
				<ul class="subMenu">
					<li><a href="historique.htm" title="A propo du SG-4F">A propo du club</a></li>
					<li><a href="stand.htm" title="Notre stand">Notre Stand</a></li>
				</ul>
			</li>
			<li><a href="#" title="Events">Events</a></li>
		</ul>

Voila le code du fichier CSS:

body
{
   background-color: grey;
   color: black; /* Toutes les balises contenues dans body verront leur texte coloré en blanc... */
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
   text-decoration: ;
}
.navigation {
    margin: 0;
    padding: 0;
    list-style: none;
	text-align: center;
    background: #000;
    color: #fff;
    width: 200px;
    font: 1.2em "Trebuchet MS", sans-serif;
}
#navigation li {
	display: inline ;
	margin-right: 1px ;
	color: #fff ;
	background: #c00 ;
}
#navigation li a {
	padding: 4px 20px ;
	background: #c00 ;
	color: #fff ;
	border: 1px solid #600 ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	text-align: center ;
	text-decoration: none ;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: #900 ;
	text-decoration: underline ;
}
.navigation a, .navigation span {
    display: block;
    padding: 4px 10px;
    color: #fff;
    text-decoration: none;
    background: #000 url(menu-item.png) left bottom no-repeat;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
    background-image: url(menu-item-deroule.png);
}
.navigation .open a, .navigation .open span {
    background-image: url(menu-item-enroule.png);
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
    text-decoration: underline;
}
.navigation .subMenu {
    font-size: .8em;
    background: #ccc url(subMenu.png) 0 0 repeat-x;
    font-size: .9em;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #666;
}
.navigation ul.subMenu a {
    background: none;
    padding: 3px 20px;
}

Merci de me dire où sont mes erreurs et m'aider.
Modifié par Adriendo (28 Apr 2009 - 20:26)

Bonjour Adriendo,

Il aurait été préférable de créer ton propre sujet. Ton problème n'est pas le même que celui du message original de ce sujet (chaque problème est unique), et si tu résous ce problème tu ne pourras pas marquer le sujet comme résolu.

Je vais donc fermer ce sujet (que je rouvrirai sur demande du créateur du sujet, le cas échéant), et t'inviter à reprendre ton message dans un nouveau sujet.

Avant cela, deux remarques:

Adriendo a écrit :
Ensuite pas moyen de le mettre en ligne c'est à dire que le menu soit horizontal et non vertical.

Il n'est pas prévu pour. Tu ne peux pas utiliser le tutoriel du menu accordéon et en faire totalement autre chose... à moins de maitriser HTML, CSS et jQuery, auquel cas tu n'as pas besoin d'exploiter ce tutoriel et tu pourras créer directement ton propre menu et ton script JavaScript qui va bien.

Adriendo a écrit :
voila le code java que j'ai mis dans le header comme demander

Il s'agit de code JavaScript, pas Java. Attention à ne pas confondre, il s'agit en effet de deux langages complètement différents.

Pour le reste, ton message montre des lacunes énormes en JavaScript (enfin, une méconnaissance totale du sujet), et une lecture un peu trop rapide du tutoriel, qui est tellement suivi à la lettre que tu as... copié-collé tous les blocs de code les uns à la suite des autres, alors que chaque bloc de code donné dans le tutoriel correspond à une version complétée ou améliorée du code de départ, pas à un code à rajouter dans la page.

Une révision sur HTML et un apprentissage des bases de JavaScript me semblent nécessaires.