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

**anxious** · 25/03/2009, 17h40

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;	
}

**anxious** · 26/03/2009, 22h27

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.

**danielhagnoul** · 27/03/2009, 01h01

Bonsoir.

Voici un exemple de code pour une barre de menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**anxious** · 27/03/2009, 18h08

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

**danielhagnoul** · 27/03/2009, 21h36

Bonsoir.

Voici un code qui fonctionne mieux !

Avant toute modification éventuelle, tenir compte des commentaires !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**anxious** · 28/03/2009, 18h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$this.css({
                    left: offset.left
                });

il va trouver "ca" dans le fichier css pour lui appliquer quoi ?

merci

**danielhagnoul** · 28/03/2009, 22h55

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.

**danielhagnoul** · 28/03/2009, 23h03

Vous pouvez tester mon code sur IE et F à l'adresse suivante :
http://www.jmcu.net/dvjh/divers/barreMenu.html

**anxious** · 28/03/2009, 23h26

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

**danielhagnoul** · 29/03/2009, 12h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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();
                    }
                );
            });
        });

**anxious** · 30/03/2009, 16h21

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.

**danielhagnoul** · 30/03/2009, 22h23

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

**anxious** · 31/03/2009, 19h05

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

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

jQuery

Discussions similaires

Partager

Partager