menu horizontal j'y suis presque

**SpaceFrog** · 22/06/2009, 13h06

Bon j'ai adapté un menu choppé sur le net
mais il y a juste deux trucs que je n'arrive pas à faire ...
voici le code:

le 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
<ul id="nav">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Présentation</a></li>
    <li><a href="#">Partenaires </a>
      <ul >
            <li ><a class="sm" href="#">Plafonds</a></li>
            <li ><a  class="sm" href="#">Platrerie</a></li>
            <li ><a  class="sm" href="#">Isolation</a></li>
            <li ><a  class="sm" href="#">Planchers Techniques</a></li>
			<li ><a  class="sm" href="#">Cloisons</a></li>
      </ul>
    </li>
	<li><a href="#">Contact</a></li>
</ul>

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
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
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:absolute;
line-height:1.5em; 
right:5%;
top: 20px;
 
}
 
#nav a{
font-size:20px;
font-weight:normal;
display:block;
padding: 10px 25px 10px 25px;
color:rgb(0,158,224);
text-decoration:none;
width:110px;
height:30px;
text-align:center;
 
}
 
 
 
#nav  a:hover{
background-repeat:no-repeat;
background-image:url("../../SitePics/Bg.gif");
}
 
.sm:hover{
background-color:#fff;
}
 
 
 
#nav li{
float:left;
position:relative;
}
 
#nav ul {
position:absolute;
display:none;
width:12em;
top:2.5em;
left:3em;
 
}
 
#nav li ul a{
font-size:12px;
font-weight:normal;
text-align:center;
background-color:rgb(208,207,203);
border: solid 1px rgb(0,158,224);
padding: 0 5px;
width:12em;
height:auto;
float:left;
position:relative;
z-index:5;
}
 
#nav ul ul{
top:auto;
}	
 
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

et le js jquery:

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
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
 
			$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
		}
 
 
 
 $(document).ready(function(){					
	mainmenu();
});

Mon premier souci est que lorsque je quitte le hover principal pour le sous menu, le background image disparait ...

j'aurais voulu conserver le background image jusqu'a ce que le sous menu soit cliqué ou mousout ...

Autre chose en principe les rubriques du sous menu devraient avoir un background color #FFF et hover, hors ils héritent du hover des a parents

Je sens que je brule ...

Merci de vos lumières

**SpaceFrog** · 22/06/2009, 16h46

voici qui resoud le problème du hover des sous menus...

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
#nav 
	{ position:absolute;
	  right:10px;
	  top:15px;
	  z-index:5;
	  }
 
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
line-height:1.5em; 
 
 
}
 
#nav a{
font-size:15px;
font-weight:bold;
display:block;
padding: 10px 25px 10px 25px;
color:rgb(0,158,224);
text-decoration:none;
width:80px;
height:25px;
text-align:center;
line-height:25px;
 
}
 
a.sm {border-collapse:collapse;}
 
#nav  a:hover{
background-repeat:no-repeat;
background-image:url("../../SitePics/Bg.gif");
}
 
#nav .sm:hover{
background-color:#fff;
background-image:none;
}
 
 
 
#nav li{
float:left;
position:relative;
}
 
#nav ul {
position:absolute;
display:none;
width:12em;
top:2.5em;
left:3em;
 
}
 
#nav li ul a{
font-size:11px;
font-weight:normal;
text-align:center;
background-color:rgb(208,207,203);
border: solid 1px rgb(0,158,224);
padding: 0 5px;
width:12em;
height:auto;
float:left;
position:relative;
 
}
 
#nav ul ul{
top:auto;
}	
 
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

**danielhagnoul** · 22/06/2009, 17h57

Bonjour.

La version suivante se comporte de la même manière sous IE8, F3 et C2.

Comme je n'ai pas l'image bg.gif, je l'ai remplacé par une grosse flèche. Lorsque le pointeur survole la barre de menu, la flèche apparait près des titres. Mais lorsque le pointeur descend dans le sous-menu, la flèche suit le pointeur.

La couleur de fond du sous menu change au survol.

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
 
<!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" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		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;
		}
 
#nav, #nav ul{
	margin:0;
	padding:0;
	list-style-type:none;
	list-style-position:outside;
	position:absolute;
	line-height:1.5em; 
	right:5%;
	top: 20px;
}
#nav a{
	font-size:20px;
	font-weight:normal;
	display:block;
	padding: 10px 25px 10px 25px;
	color:rgb(0,158,224);
	text-decoration:none;
	width:110px;
	height:30px;
	text-align:center;
}
#nav  a:hover{
	background-repeat:no-repeat;
	background-image:url("../images/arrowNext.gif");
}
#nav .sm:hover{
	background-color:#fff;
}
#nav li{
	float:left;
	position:relative;
}
#nav ul {
	position:absolute;
	display:none;
	width:12em;
	top:2.5em;
	left:3em;
}
#nav li ul a{
	font-size:12px;
	font-weight:normal;
	text-align:center;
	background-color:rgb(208,207,203);
	border: solid 1px rgb(0,158,224);
	padding: 0 5px;
	width:12em;
	height:auto;
	float:left;
	position:relative;
	z-index:5;
}
#nav ul ul{
	top:auto;
}	
#nav li ul ul {
	left:12em;
	margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
	display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
	display:block;
}
 
	</style>
	<!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
 
		function mainmenu(){
			$("#nav ul").css("display","none"); // Opera Fix
 
			$("#nav li").hover(
				function(){
					$(this).find('ul:first').css({
						visibility: "visible",
						display: "none"
					}).show(400);
				},
				function(){
					$(this).find('ul:first').css("visibility","hidden");
				}
			);
		}
 
		$(document).ready(function(){
			mainmenu();
		});
	</script>
</head>
<body>
	<ul id="nav">
		<li><a href="#">Accueil</a></li>
		<li><a href="#">Présentation</a></li>
		<li>
			<a href="#">Partenaires </a>
			<ul >
				<li ><a class="sm" href="#">Plafonds</a></li>
				<li ><a  class="sm" href="#">Platrerie</a></li>
				<li ><a  class="sm" href="#">Isolation</a></li>
				<li ><a  class="sm" href="#">Planchers Techniques</a></li>
				<li ><a  class="sm" href="#">Cloisons</a></li>
			</ul>
		</li>
		<li><a href="#">Contact</a></li>
	</ul>
</body>
</html>

**SpaceFrog** · 23/06/2009, 09h21

Merci, mais je ne pense pas que cela résolve mon souci de la background-image qui se modifie au survol des titres, mais ne reste pas lors du survol des sous menus...

[edit]
C'est bien ce que je craignais,
hormis l'effet d'affichage du sous menu, ce code ne me fais pas avancer

il reproduit même l'erruer que j'avais au départ de l'image qui se colle en background des sous menu, qu j'ai résolu entre temps...
le fond du body est blanc ...

**le_chomeur** · 23/06/2009, 10h04

je pencherais plus pour un problème de css ...
le code jquery est tout simple : affichage de tous les sous menu au hover sur une durée de 400ms

masquage au out

hors tu gères l'affichage du fond sur le hover en css ...

à chercher de ce coté :-/ ( je pense

)

**SpaceFrog** · 23/06/2009, 10h35

J'en étais là aussi fillot, mais étant de la vielle école, et n'ayant pas encore eu le temps d'approfondir Jquery ...
Je n'arrive à rien, même pas à declencher un alert sur le mousout

menu horizontal j'y suis presque

jQuery

Vue hybride

Discussions similaires

Partager

Partager