Problème menu accordeon JQuery

Question

dougoub

10 Nov 2008 à 16:55

Bonjour à tous,

Je suis nouvelle sur le forum et je ne connais pas très bien le Javascript et css. j'essaye de me débrouiller et j'ai repris le tutoriel que j'ai trouvé ici http://css.alsacreations.com/Tutoriels-JavaScript/Creer-un-menu-accordeon-avec-jQuery5 et que j'ai essayé de modifier pour mon utilisation en téléchargement le js associé bien sûr.

J'ai fait un troisième niveau de lien que je ne fais apparaître qu'au survol des liens deuxième niveau avec la souris.

Cela fonctionne très bien sur IE 6 mais pas du tout sur Firefox 2.0.0.17, on ne voit pas les sous-sous-liens apparaitre au passage de la souris sur les sous-liens.

Je suis désespérée, j'ai cherché pendant plusieurs jours, rien n'y fait, si quelqu'un a une idée ce serait vraiment super ! Smiley smile

Par avance merci.

Voici ma page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Menu accordéon avec jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="/faviconbsagroup.ico" /><![endif]-->
	<title>BSA Group</title>

<!--[if lt IE 7]>
    <script type="text/javascript">

    // Fonction destinée à remplacer le "LI:hover" pour IE 6

        sfHover = function() {
             var sfEls = document.getElementsByTagName("li");
             for (var i=0; i<sfEls.length; i++) {
              sfEls[i].onmouseover = function() {
                this.className = this.className.replace(new RegExp(" sfhover"), "");
                this.className += " sfhover";
              }
              sfEls[i].onmouseout = function() {
                this.className = this.className.replace(new RegExp(" sfhover"), "");
              }
             }
        }
        if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <style type="text/css">
        li {width: 150px;}
    </style>
<![endif]--> 
	<!--[if lte IE 6]>
	<style type="text/css">
		li {
			height: 1px;
			}
	</style>
	<![endif]-->
    <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" :
        $("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l'element span qu'ils contiennent par un lien :
        $("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>') ;
        } ) ;
    
        // On modifie l'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja 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 cache, on ferme les autres et on l'affiche :
            else {
                $("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>

	<style type="text/css">
			#navigation {
			margin: 0;
			padding: 0;
 			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-weight:bold;
			list-style-type:none;
			}
			ul ul {
 			display: none;
 			margin:0px;
			padding: 0px;
			}
			li li:hover ul.ss, li li.sfhover ul.ss {
 			display: block;
  			}
			.toggleSubMenu {
			padding-bottom:50px;
			}
			.toggleSubMenu a {
			color:#000000;	
			font-size:0.9em;
			}	
			.subMenu a {
			font-size:0.8em;
			}	
			.ss a {
			font-size:0.7em;
			}	
		    .subMenu {
			border-left:none;
			margin: 0;
			padding: 0;
			list-style-type:none;
			width:150px;
			}
		    .ss {
			border-left: 0.1em solid #ccc;
			position:absolute;
			margin: 0;
			padding: 0;
			list-style-type:none;
			left:160px;
			width:150px;			
			}
			#navigation a {
			padding: 0px 10px;
			text-decoration: none;
			}
			#navigation a:hover, #navigation a:focus, #navigation a:active {
			text-decoration: none;
			}
			/*COULEUR LIENS*/
			#liena .subMenu a {
			color: #EC8448;
			}
			#liena .ss  a {		
			color: #EC8448;
			}
			#lienb .subMenu a {
			color:#1C85A9;;
			}
			#lienb .ss  a {		
			color:#1C85A9;;
			}
			#lienc .subMenu a {
			color:#990033;
			}
			#lienc .ss  a {		
			color:#990033;
			}
			#liend .subMenu a {
			 color:#E13958;
			}
			#liend .ss  a {		
			 color:#E13958;
			}
			/*PUCES*/
			#smenu1 li.sfhover, #smenu1 li:hover {		
			 background-image:url(images/puce-orange.gif);
			 background-repeat:no-repeat;
			 background-position:0% 65%;
			}
			#smenu2 li.sfhover, #smenu2 li:hover {		
			 background-image:url(images/puce-bleue.gif);
			 background-repeat:no-repeat;
			 background-position:0% 65%;
			}
			#smenu3 li.sfhover, #smenu3 li:hover {		
			 background-image:url(images/puce-bordeaux.gif);
			 background-repeat:no-repeat;
			 background-position:0% 65%;
			}
			#smenu4 li.sfhover, #smenu4 li:hover {		
			 background-image:url(images/puce-rose.gif);
			 background-repeat:no-repeat;
			 background-position:0% 65%;
			}
			#ssmenu1 li:hover, #ssmenu1 li.sfhover {
			 background-image:none; 
			}
			#ssmenu2 li:hover, #ssmenu2 li.sfhover {
			 background-image:none; 
			}
			#ssmenu3 li:hover, #ssmenu3 li.sfhover {
			 background-image:none; 
			}
			#ssmenu4 li:hover, #ssmenu4 li.sfhover {
			 background-image:none; 
			}
	</style>

</head>
<body>

   <ul id="navigation">
	<div id="liena">
        <li class="toggleSubMenu"><span>Item 1</span>
		   <ul id="smenu1" class="subMenu">
                <li><a href="#">Item 1.1</a></li>
					<ul id="ssmenu1" class="ss">
						<li><a href="#">Item1.1.1</a>
						</li>
						<li><a href="#">Item1.1.2</a>
						</li>
					</ul>
                <li><a href="#">Item 1.2</a></li>

                <li><a href="#">Item 1.3</a></li>
            </ul>
		</li>
	</div>
    <div id="lienb">
	    <li class="toggleSubMenu"><span>Item 2</span>
            <ul id="smenu2" class="subMenu">
                <li><a href="#">Item 2.1</a></li>
					<ul id="ssmenu2" class="ss">
						<li><a href="#">Item2.1.1</a>
						</li>
						<li><a href="#">Item2.1.2</a>
						</li>
					</ul>
                <li><a href="#">Item 2.2</a></li>

                <li><a href="#">Item 2.3</a></li>
            </ul>
        </li>
	</div>
    <div id="lienc">
		<li class="toggleSubMenu"><span>Item 3</span>
           <ul id="smenu3" class="subMenu">
                <li><a href="#">Item 3.1</a></li>
					<ul id="ssmenu3" class="ss">
						<li><a href="#">Item 3.1.1</a>
						</li>
						<li><a href="#">Item 3.1.2</a>
						</li>
					</ul>
                <li><a href="#">Item 3.2</a></li>

                <li><a href="#">Item 3.3</a></li>
            </ul>
        </li>
	</div>
    <div id="liend">    
		<li class="toggleSubMenu"><span>Item 4</span>
		<ul id="smenu4" class="subMenu">
                <li><a href="#">Item 4.1</a></li>
					<ul id="ssmenu4" class="ss">
						<li><a href="#">Item 4.1.1</a>
						</li>
						<li><a href="#">Item 4.1.2</a>
						</li>
					</ul>
                <li><a href="#">Item 4.2</a></li>

                <li><a href="#">Item 4.3</a></li>
            </ul>
		</li>
	</div>
   </ul>    
</body>
</html>

[/i][/i]
Modifié par dougoub (12 Nov 2008 - 09:48)

Raphael

Administrateur

10 Nov 2008 à 17:05

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

dougoub

12 Nov 2008 à 11:19

Bonjour,

Voila mon message apparaît correctement, veuillez m'excusez.

Personne n'a même l'idée d'une petite piste ?

S'il vous plaît, j'ai vraiment tout essayer, il n'y aurait pas un expert parmi vous ?

:)

fvsch

12 Nov 2008 à 12:11

dougoub a écrit :
Personne n'a même l'idée d'une petite piste ?

Attendre de mieux se débrouiller en HTML, CSS et JavaScript avant de modifier des scripts existants. Et donc, concrètement:
- trouver des scripts correspondant précisément à ce que l'on souhaites faire;
- ou, à défaut, modifier ses attentes pour être en mesure de les réaliser avec les outils disponibles.

La remarque est généraliste et ne constitue pas une critique de ton code que je n'ai, en réalité, pas eu le temps d'analyser correctement. Smiley cligne

dougoub

12 Nov 2008 à 12:21

Coucou,

Je suis 100 % d'accord avec toi sur le fond.

Et bidouiller, modifier un code existant n'est jamais l'idéal, ça reste du bidouillage, néanmoins je fais avec les moyens du bord et je m'en suis pas mal sortie puisque ça fonctionne sur au moins un navigateur. je suis sûre que c'est juste un petit truc qui bloque sur Firefox ! Smiley smile

Bon maintenant mon apprentissage ne se fait qu'en lisant des tutoriaux sur le web et en testant des trucs alors faut bien que je passe par là ! Smiley langue

fvsch

12 Nov 2008 à 13:54

dougoub a écrit :
je suis sûre que c'est juste un petit truc qui bloque sur Firefox !

J'en suis moins sûr. Le code HTML de ton menu modifié est faux (notamment en ce qui concerne les imbrications d'éléments), c'est déjà étonnant que ça marche dans un navigateur.

Le moyen de rendre ça compatible avec Firefox serait de... corriger le code HTML afin qu'il soit valide, et sans doute corriger ton script jQuery dans la foulée.
Modifié par Florent V. (12 Nov 2008 - 13:55)

dougoub

12 Nov 2008 à 15:49

Bon ben c'est justement ça que je ne sais pas faire, tanpis alors si personne ne peut m'aider.

Sujet clos

Questions générales et questions de débutants

Problème menu accordeon JQuery