bug JS qui me fait perdre l'heritage des positions de mes menus.

Version imprimable

bonjour,

j'ai suivis les tutoriels du site pour avoir un système de menus reactifs à l'aide de jQuery, le problème c'est que au lieu que le sous menu s'ouvre sous le menu correspondant, il s'ouvre toujours à la même place.

voyez par vous mêmes (boutons GSP, dossiers, et résultats)
http://www.gamer-certified.fr/accueil.html

merci de votre aide.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="menu_head">
    <img src="images/menu_dossiers.png" alt="image du menu dossiers" width="150" height="50"  id="menu_dossiers" />
 
		<ul class="menu_body" id="dossiers" ><!-- sous-menu -->
        	<li><a href="#">Dossiers techniques</a></li>
   	</ul>
</div>
 
<div class="menu_head">
    <img src="images/menu_gsp.png" alt="image du menu des GSP" width="150"  height="50" id="menu_GSP"  />
        <ul class="menu_body" id="GSP">
        		<li><a href="gsp.html">Palmarès utilisateur Ete 2008</a></li>
                <li><a href="#">Comparatif des offres des GSP</a></li>
   	</ul>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
 
   	$("ul.menu_body li:even").addClass("alt"); // permet de switch les couleurs du sous menu
 
    $('img#menu_dossiers').click(function () {
        $('ul#dossiers').slideToggle('medium');
    });
 
	$('img#menu_GSP').click(function () {
        $('ul#GSP').slideToggle('medium');
    });
 
	$('img#menu_resultats').click(function () {
        $('ul#resultats').slideToggle('medium');
    });
 
    $('ul.menu_body li a').mouseover(function () {
        $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
    $('ul.menu_body li a').mouseout.(function () {
        $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#menu {
	margin-left:30px;
	}
 
.menu_head {
	position:relative;
	display:inline;
}
 
 
.menu_body {
 
	width:150px;
	display:none;
	position:absolute;
 
}
 
 
ul, li{
    margin:0;
    padding:0;
    list-style:none;	
}

26/03/2009, 22h27
anxious

personne n'a une petite idée s'il vous plait ?

cela vient biens de mon code jquery car si je le désactive et que je vire la balise display:none; je vois mes sous menus correctement apparaitre en dessous des menus correspondants.

:oops:

Bonsoir.

Voici un exemple de code pour une barre de menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<!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="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Barre de menu</title>
    <style type="text/css">
        ul {
            margin:0px;
            padding:0px;
            list-style:none;
        }
        li.menu {
            display:inline;
        }
        li.menu ul {
            position:absolute;
            display:none;
            background-color:#FFFFCC;
            border:thin solid #999999;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("li.menu").hover(
              function (e) {
                  var $this = $(this).find("ul");
                var offset = $(this).offset();
 
                $this.css({
                    left: offset.left
                });
 
                $this.show();
              }, 
              function () {
                $(this).find("ul").hide();
              }
            );
        });
    </script>
</head>
<body>
    <ul>
        <li class="menu">
            <img src="#" alt="Menu 1" width="150" height="50" border="1" />
            <ul>
                <li>Menu 1.1</li>
                <li>Menu 1.2</li>
                <li>Menu 1.3</li>
            </ul>
        </li>
        <li class="menu">
            <img src="#" alt="Menu 2" width="150" height="50" border="1" />
            <ul>
                <li>Menu 2.1</li>
                <li>Menu 2.2</li>
                <li>Menu 2.3</li>
            </ul>
        </li>
        <li class="menu">
            <img src="#" alt="Menu 3" width="150" height="50" border="1" />
            <ul>
                <li>Menu 3.1</li>
                <li>Menu 3.2</li>
                <li>Menu 3.3</li>
            </ul>
        </li>
    </ul>
</body>
</html>

27/03/2009, 18h08
anxious

merci, je vais me servir de ce modèle.

Bonsoir.

Voici un code qui fonctionne mieux !

Avant toute modification éventuelle, tenir compte des commentaires !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
<!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="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Barre de menu</title>
    <style type="text/css">
        body {
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            background-color:#FFFFFF;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        ul {
            list-style:none;
        }
        div#barreMenu {
            width:700px;
            margin:0px auto;
        }
        div#barreMenu img {
            width:100px;
            height:25px;
        }
        li.menu {
            margin:0px;
            padding:0px;
            width:100px;
            height:25px;
            /*border est indispensable pour le bon fonctionnement du menu ! Ne peut pas être totalement invisible : #FFFFFF ! */
            border:1px solid #F7F7F7; 
            display:inline;
        }
        li.menu ul {
            position:absolute;
            display:none;
            margin:0px;
            padding:0px;
            background-color:#FFFFCC;
            border:thin solid #999999;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("li.menu").each(function(i){
                var subUL = $(this).find("ul");
                var offset = $(this).offset();
 
                $(this).hover(
                    function(e) {
                        subUL.css({
                            left: offset.left
                        });
 
                        subUL.show(); //l'utilisation d'effet, type slideDown(), perturbe le fonctionnement du menu !
                    },
                    function(e) {
                        subUL.hide();
                    }
                );
            });
        });
    </script>
</head>
<body>
    <div id="barreMenu">
        <ul>
            <li class="menu">
                <img src="../images/menu_accueil.png" />
                <!-- l'utilisation d'une image en remplacement de Menu 1, complique les choses. -->
                <ul>
                    <li>Menu 1.1</li>
                    <li>Menu 1.2</li>
                    <li>Menu 1.3</li>
                </ul>
            </li>
            <li class="menu">
                <img src="../images/menu_dossiers.png" />
                <ul>
                    <li>Menu 2.1</li>
                    <li>Menu 2.2</li>
                    <li>Menu 2.3</li>
                </ul>
            </li>
            <li class="menu">
                <img src="../images/menu_forums.png" />
                <ul>
                    <li>Menu 3.1</li>
                    <li>Menu 3.2</li>
                    <li>Menu 3.3</li>
                </ul>
            </li>
            <li class="menu">
                <img src="../images/menu_gsp.png" />
                <ul>
                    <li>Menu 4.1</li>
                    <li>Menu 4.2</li>
                    <li>Menu 4.3</li>
                </ul>
            </li>
            <li class="menu">
                <img src="../images/menu_infos.png" />
                <ul>
                    <li>Menu 5.1</li>
                    <li>Menu 5.2</li>
                    <li>Menu 5.3</li>
                </ul>
            </li>
            <li class="menu">
                <img src="../images/menu_resultat.png" />
                <ul>
                    <li>Menu 6.1</li>
                    <li>Menu 6.2</li>
                    <li>Menu 6.3</li>
                </ul>
          </li>
        </ul>
    </div>
</body>
</html>

j'avais fait quelques modification a partir du premier script que vous m'aviez donné, j'arrive a ce résultat parfaitement fonctionnel, qui en plus a l'air de coller avec le deuxième :

edit : sous firefox, tout est parfait, *evidemment* sous IE7 c'est juste pas possible, les sous menus s'affichent SUR les menus et non SOUS les menus. HELP please

pour tester : www.gamer-certified.fr/accueil.html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("li.menu").hover( function (e) { var $this = $(this).find("ul"); var offset = $(this).offset(); $this.css({ left: offset.left }); $this.show("medium"); }, function () { $(this).find("ul").hide("fast"); } ); }); </script> </head>
*malheureusement* les sous menus s'ouvrent de haut en bas et en même temps de gauche a droite. et je voudrais supprimer l'effet de gauche a droite, y aurait t'il une option que j'ai loupé dans les docs de jquery qui permette de le faire ?

dernière petite question : a quoi sert ça :
Code:

1 2 3 $this.css({ left: offset.left });
il va trouver "ca" dans le fichier css pour lui appliquer quoi ?

merci

28/03/2009, 22h55
danielhagnoul

Bonsoir.

Le dernier code que je vous ai transmis marche sur IE8 et sur F3.

Bien le relire, tout est important, aussi bien le code javascript que les styles CSS qui s'appliquent à la barre de menu.

offset.left sert simplement à mettre le sous-menu en dessous du menu.

J'ai été voir votre site, le code et le style que vous utilisez sont différents.
28/03/2009, 23h03
danielhagnoul

Vous pouvez tester mon code sur IE et F à l'adresse suivante :
http://www.jmcu.net/dvjh/divers/barreMenu.html
28/03/2009, 23h26
anxious

Daniel, c'est vraiment très gentil à vous de me répondre rapidement ;)

je suis allé sur votre site, malheureusement, j'obtiens le même résultat aussi :
sur firefox, tout va bien, je vois les menus apparaitre sous les menus
sur IE7, je vous poste le lien du screenshot que j'ai pris de mon écran pour vous montrer ce que j'obtiens :)

Image du bug sous Internet Explorer

Bonjour anxious.

Mille excuses, c'est ma faute !

Ayant installé IE8, je ne pense déjà plus aux anciennes et calamiteuses versions.

À tort bien sûr, car cela risque de me jouer de sale tour.

En basculant IE8 en mode compatibilité, je vois bien le problème.

Le code suivant repositionne le sous-menu en hauteur, avec de la bidouille pour IE7 comme d'habitude.

Reste à voir le rendu sur IE6 et autres calamités. J'ai déjà vu un lien vers un site qui permet ce genre de test, mais je ne le retrouve plus.

http://www.jmcu.net/dvjh/divers/barreMenu.html vous permettra de tester le code.

Je suis curieux de connaître le résultat de vos tests, mais je dois vous quitter, car j'ai des agapes qui m'attendent et ne reviendrai en ligne que ce soir, tard.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $(document).ready(function() { $("li.menu").each(function(i){ var subUL = $(this).find("ul"); var offset = $(this).offset(); var offsetTop = $(this).height() + offset.top - 1; // -1 pour bien coller à la barre de menu $(this).hover( function(e) { subUL.css({ left: offset.left, top: offsetTop, zIndex: 2 // pour IE8 en mode compatibilité - donc IE7 ! }); subUL.show(); //l'utilisation d'effet, type slideDown(), perturbe le fonctionnement du menu ! }, function(e) { subUL.hide(); } ); }); });

30/03/2009, 16h21
anxious

merci, je crois que tout est bon maintenant. j'ai juste fait une petite concession sur la façon dont les menus s'ouvrent, mais c'est sans importance.

:king:
30/03/2009, 22h23
danielhagnoul

Bonsoir.

J'ai cherché plus malin que moi et il semble qu'avec des adaptations le SmoothMenu pourrait convenir et permettre des menus plus complexes, voir ma page de test :
http://www.jmcu.net/dvjh/SmoothMenu/index.html
31/03/2009, 19h05
anxious

j'apprécie particulièrement ce dernier.

merci pour tout en tout cas, je vais fouiller tout ça ;)

http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

c'est par ici que ça se passe pour les interessés ;)