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

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager