Menu et sous menu horizontal marche la deuxième fois mais pas à la première

**robomatix** · 03/09/2010, 17h25

Bonjour,

Je ne sais pas si mon titre est claire...

Je cherche à faire apparaitre un sous menu horizontal sous un menu lui aussi horizontal... Le problème, c'est que le sous menu apparait bien lorsque l'on passe sur un élément du menu, mais il disparait la première fois que l'on va dessus et reste bien si on y reviens > pour voir ça en action : http://www.yadlapomme.com/testzone/j...nu1/test1.html

Il y a un 0 ou un 1 qui apparait pour visualiser une variable indiquant si le sous menu et ouvert ou pas...

Voici le code de la page :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css.css" type="text/css" media="all" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type='text/javascript'>
            var obj = null;
            var sous_menu_on = 0;
 
            function checkHover() {
                //alert(sous_menu_on);
                if (obj) {
                    $("#alerte").text(sous_menu_on);
                    obj.hover(function() {
                        sous_menu_on = 1;
                    }, function() {
                        sous_menu_on = 0;
                        // alert("checkover out");
                    });
                    $("#alerte").text(sous_menu_on);
                    if(sous_menu_on==0){
                        obj.hide();
                        obj = null;
                    }//if
                } //if
 
 
            } //checkHover
 
            $(document).ready(function() {
 
                $('#conteneur_menu > a').hover(function() {
                    if (obj) {
                        obj.hide();
                        obj = null;
                        sous_menu_on = 0;
                    } //if
                    menu_id = $(this).attr('id');
                    $('#sous_'+menu_id).show();
                }, function() {
                    obj = $('#sous_'+menu_id);
                    setTimeout(
                    "checkHover()",
                    0); // si vous souhaitez retarder la disparition, c'est ici
                });
 
            });
        </script>
    </head>
    <body>
        <div id="conteneur_menu">
            <a href="#" class="accueil" id="menu_1">accueil</a>
            <a href="#" class="critiques" id="menu_2">critiques</a>
            <a href="#" class="actualites" id="menu_3">actualités</a>
            <a href="#" class="agenda" id="menu_4">agenda</a>
            <a href="#" class="portraits" id="menu_5">portraits</a>
            <a href="#" class="interviews" id="menu_6">interviews</a>
            <a href="#" class="reportages" id="menu_7">reportages</a>
            <a href="#" class="videos" id="menu_8">vidéos</a>
            <a href="#" class="breves" id="menu_9">brèves</a>
            <a href="#" class="tribunes" id="menu_10">tribune</a>
        </div>
        <div id="conteneur_sous_menu">
            <div id="sous_menu_1" class="sous_menu">
                accueil xxxxxxxx
            </div>
            <div id="sous_menu_2" class="sous_menu">
                critiques
            </div>
            <div id="sous_menu_3" class="sous_menu">
                actualites
            </div>
            <div id="sous_menu_4" class="sous_menu">
                agenda
            </div>
            <div id="sous_menu_5" class="sous_menu">
                portraits
            </div>
            <div id="sous_menu_6" class="sous_menu">
                interviews
            </div>
            <div id="sous_menu_7" class="sous_menu">
                reportages
            </div>
            <div id="sous_menu_8" class="sous_menu">
                videos
            </div>
            <div id="sous_menu_9" class="sous_menu">
                breves
            </div>
            <div id="sous_menu_10" class="sous_menu">
                tribunes
            </div>
            <div id="alerte"></div>
        </div><!--#conteneur_sous_menu-->
    </body>
</html>

et le css :

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
 
*{
    margin: 0px;
    padding: 0px;
}
#conteneur_menu{
    float:left;
    width: 930px;
    height: 24px;
    background-color: #cc00ff;
}
#conteneur_menu a{
    float: left;
    height:24px;
    padding-right: 10px;
}
#sous_menu{
    float:left;
    width: 978px;
    height: 52px;
    clear:both;
}
#conteneur_sous_menu{
    float:left;
    width: 918px;
    height: 52px;
    background-color: #ff0;
}
div.sous_menu{
    display: none;
    background-color: #f00;
    height:30px;
}

Est ce que quelqu'un aurait une idée pour éviter cela ?

Merci d'avance de votre aide...

**danielhagnoul** · 03/09/2010, 22h12

Bonsoir

Exemple, avec une option :

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		h2 {
			text-align:center;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		#conteneur_menu{
			float:left;
			width: 930px;
			height: 24px;
			background-color: #cc00ff;
		}
		#conteneur_menu a{
			float: left;
			height:24px;
			padding-right: 10px;
		}
		#sous_menu{
			float:left;
			width: 978px;
			height: 52px;
			clear:both;
		}
		#conteneur_sous_menu{
			float:left;
			width: 918px;
			height: 52px;
			background-color: #ff0;
		}
		div.sous_menu{
			display: none;
			background-color: #f00;
			height:30px;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script>
		$(function(){
			var objSousMenu = null;
 
			$("[id^='menu_']").mouseenter(function(){
				if (objSousMenu){
					objSousMenu.hide();
				}
 
				objSousMenu = $("#sous_"+this.id).show();
			});
 
 
			/*
			 * Option
			 *
			 * faire disparaître le sous_menu lorsqu'on le quitte
			 */
 
			/*
			$("[id^='sous_menu_']").mouseleave(function(){
				if (objSousMenu){
					objSousMenu.hide();
				}
			});
			*/
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
        <div id="conteneur_menu"> 
            <a href="#" class="accueil" id="menu_1">accueil</a> 
            <a href="#" class="critiques" id="menu_2">critiques</a> 
            <a href="#" class="actualites" id="menu_3">actualités</a> 
            <a href="#" class="agenda" id="menu_4">agenda</a> 
            <a href="#" class="portraits" id="menu_5">portraits</a> 
            <a href="#" class="interviews" id="menu_6">interviews</a> 
            <a href="#" class="reportages" id="menu_7">reportages</a> 
            <a href="#" class="videos" id="menu_8">vidéos</a> 
            <a href="#" class="breves" id="menu_9">brèves</a> 
            <a href="#" class="tribunes" id="menu_10">tribune</a> 
        </div> 
        <div id="conteneur_sous_menu"> 
            <div id="sous_menu_1" class="sous_menu"> 
                accueil xxxxxxxx
            </div> 
            <div id="sous_menu_2" class="sous_menu"> 
                critiques
            </div> 
            <div id="sous_menu_3" class="sous_menu"> 
                actualites
            </div> 
            <div id="sous_menu_4" class="sous_menu"> 
                agenda
            </div> 
            <div id="sous_menu_5" class="sous_menu"> 
                portraits
            </div> 
            <div id="sous_menu_6" class="sous_menu"> 
                interviews
            </div> 
            <div id="sous_menu_7" class="sous_menu"> 
                reportages
            </div> 
            <div id="sous_menu_8" class="sous_menu"> 
                videos
            </div> 
            <div id="sous_menu_9" class="sous_menu"> 
                breves
            </div> 
            <div id="sous_menu_10" class="sous_menu"> 
                tribunes
            </div> 
            <div id="alerte"></div> 
        </div><!--#conteneur_sous_menu--> 
	</div>
</body>  
</html>

**robomatix** · 06/09/2010, 20h32

Bonsoir !

Merci Daniel d'avoir pris le temps de me ttre sur la bonne prise et de m'avoir montrer des possibilité de jQuery que je ne connaisais pas... Et oui, je suis débutant en Jquery...

Voici ce que je voulais faire au final : http://www.yadlapomme.com/testzone/j...nu1/test5.html. Je l'ai testé sous FF et PC uniquement...

Un menu avec le sous menu correspondant à la page (on mélange le sous menu et un final d'ariane dans le même truc)... Lorsque l'on survol les lien du menu, le sous menu correspondant s'affiche. Si on quitte le menu ou le sous menu, le sous menu fil d'ariane réapparait...

Code :

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
 
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="Author" content="Daniel Hagnoul">
        <title>Forum jQuery</title>
        <style>
            /* BASE */
            body {
                background-color:#dcdcdc;
                color:#000000;
                font-family:sans-serif;
                font-size:medium;
                font-style:normal;
                font-weight:normal;
                line-height:normal;
                letter-spacing:normal;
            }
            h1,h2,h3,h4,h5 {
                font-family:serif;
            }
            div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                margin:0px;
                padding:0px;
            }
            p {
                padding:6px;
            }
            ul,ol,dl {
                list-style:none;
                padding-left:6px;
                padding-top:6px;
            }
            li {
                padding-bottom:6px;
            }
 
            /* dvjh */
            h1 {
                text-align:center;
                font-style:italic;
                text-shadow: 4px 4px 4px #bbbbbb;
            }
            h2 {
                text-align:center;
            }
            div#conteneur {
                width:900px;
                height:60px;
                margin:12px auto;
                background-color:#FFFFFF;
                color:#000000;
                border:1px solid #666666;
            }
            div#affiche {
                clear:both;
                margin:12px;
                padding:6px;
                border:1px solid #999999;
                background-color:#FFFFFF;
                color:#000000;
            }
 
            /* TEST */
            #conteneur_menu{
                float:left;
                width: 900px;
                height: 30px;
                background-color: #cc00ff;
            }
            #conteneur_menu a{
                float: left;
                height:30px;
                padding-right: 10px;
            }
            #sous_menu{
                float:left;
                width: 900px;
                height: 30px;
                clear:both;
            }
            #conteneur_sous_menu{
                float:left;
                width: 900px;
                height: 30px;
                background-color: #ff0;
            }
            div.sous_menu{
                display: none;
                background-color: #f00;
                height:30px;
            }
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
                var objSousMenu = null;
                var actif = 1;// On sélectionne le sous menu affiché à l'arrivée sur la page
           $(document).ready(function() {
 
               objSousMenu = $("#sous_menu_"+actif).show();
 
                $("[id^='menu_']").mouseenter(function(){
                    if (objSousMenu){
                        objSousMenu.hide();
                    }
                    objSousMenu = $("#sous_"+this.id).show();
                });
                /*
                 * Option
                 *
                 * faire aparaître le sous_menu de la lorsqu'on quitte le menu (en fait on détecte lorsque l'on va sur un autre élément...)
                 */
                $("#conteneur").hover(function(){
                    if (objSousMenu){
                        objSousMenu.hide();
                        objSousMenu = $("#sous_menu_"+actif).show();
                    }
                });                        
 
            });
        </script>
    </head>
    <body>
        <h1>Forum jQuery</h1>
        <div id="conteneur">
 
            <div id="conteneur_menu">
                <a href="#" class="accueil" id="menu_1">accueil</a>
                <a href="#" class="critiques" id="menu_2">critiques</a>
                <a href="#" class="actualites" id="menu_3">actualités</a>
                <a href="#" class="agenda" id="menu_4">agenda</a>
                <a href="#" class="portraits" id="menu_5">portraits</a>
                <a href="#" class="interviews" id="menu_6">interviews</a>
                <a href="#" class="reportages" id="menu_7">reportages</a>
                <a href="#" class="videos" id="menu_8">vidéos</a>
                <a href="#" class="breves" id="menu_9">brèves</a>
                <a href="#" class="tribunes" id="menu_10">tribune</a>
            </div>
            <div id="conteneur_sous_menu">
                <div id="sous_menu_1" class="sous_menu">
                    accueil xxxxxxxx
                </div>
                <div id="sous_menu_2" class="sous_menu">
                    critiques
                </div>
                <div id="sous_menu_3" class="sous_menu">
                    actualites
                </div>
                <div id="sous_menu_4" class="sous_menu">
                    agenda
                </div>
                <div id="sous_menu_5" class="sous_menu">
                    portraits
                </div>
                <div id="sous_menu_6" class="sous_menu">
                    interviews
                </div>
                <div id="sous_menu_7" class="sous_menu">
                    reportages
                </div>
                <div id="sous_menu_8" class="sous_menu">
                    videos
                </div>
                <div id="sous_menu_9" class="sous_menu">
                    breves
                </div>
                <div id="sous_menu_10" class="sous_menu">
                    tribunes
                </div>
                <div id="alerte"></div>
            </div><!--#conteneur_sous_menu-->
        </div>
    </body>
</html>

Qu'en pensez vous ?
Peut on l'optimisé ?
Peut on obtenir le même effet avec un code plus propre ?

Merci d'avance de votre aide !

**danielhagnoul** · 06/09/2010, 20h49

Bonsoir

Le code est correct.

Il reste à choisir des couleurs plus reposantes pour l'oeil

**robomatix** · 07/09/2010, 09h40

Encore merci Daniel de ton aide !

Lorsque j'aurais fini le site pour lequel j'ai fait ce menu avec ton aide, je le posterais ici. Ca aidera peut être d'autres ! Il y aura sans doute aussi un système pour faire ressortir la catégorie et la sous catégorie dans laquelle on se trouve.

C'est pour un site en spip, j'irais peut être même jusqu'à en faire un plugin si j'ai le temps...

Menu et sous menu horizontal marche la deuxième fois mais pas à la première

jQuery

Vue hybride

Discussions similaires

Partager

Partager