Décalage menu CSS

**NicoGT3** · 18/02/2009, 09h41

Bonjour a tous,

Je fait appelle a vous afin d'essayer de résoudre mon problème que je traine depuis deux jours ... Voilà, je développe un site internet dont j'ai créé le design/maquette si vous-voulez a l'aide de Photoshop que voici un rapide screen.

Après avoir réaliser ceci, j'ai commencer la mise en page dans DW tout va bien jusqu'au moment ou la construction des sous-menu doit se faire. Et la pas moyen quelque soit la technique utilisé d'arriver a faire les sous-menu correctement ... J'ai essayer le Spry menu horizontale avec du CSS mais je le change tellement qu'il bug a la fin :/, j'ai essayer manuellement mais je ne sais pas du tout comment élaborer un "comportement" en cas de survole etc ... J'ai même essayer sous Fireworks mais je ne suis pas arriver du tout a un bon résultat :/

Il y a surement quelque chose que je fait mal ou autre je ne sais pas mais la je désespère :/ alors j'aimerais bien que quelqu'un ait la bonté de me trouver une solution efficace a mon problème de sous-menu.

De plus, j'ai prévue un hover qui permute les image de base en la mm image avec d'autre effet Photoshop et sa sous DW je sais pas faire :/ mais c'est la seul chose que j'ai réussi a faire fonctionner sous FW ^^.

Donc voila ma requête finale :

J'aimerais qu'on me trouve une solution afin que je puisse installer mon menu et sous-menu correctement (le sous-menu doit s'afficher sous l'onglet qui set survoler et rester afficher tant qu'on ne quitte pas le sous-menu avec sa souris) et un effet de permutation d'image pour chacun des bouton (menu et sous-menu compris).

Merci d'avoir lu.
D'avance merci pour une/les solution(s) apportées future.

Cordialement, NicoGT3.

**Jumano** · 18/02/2009, 11h31

Bonjour,
Le lien que tu donnes ne fonctionne pas.
Peux tu poster le code correspondant à ton menu et sous-menu que l'on puisse mieux comprendre ton problème.

Tu peux déjà également regardé du côté de la Galerie CSS ici, peut être que tu trouveras par toi même ta solution.

un effet de permutation d'image pour chacun des bouton

Pour ceci tu peux utiliser le survol d'image : Insertion > Objets Image > Image survolée.

**NicoGT3** · 18/02/2009, 11h35

Bah euh pour moi le lien quand je clic dessus fonctionne très bien perso :/ j'arrive a la page avec mon screen dedans ... Sinon Mon menu/sous-menu est une simple liste que je veux transformé en se fichu menu dynamique ^^.

(Je vais regarder votre lien CSS)

Après avoir regarder ce lien, effectivement le type de menu qu'il me faut c'est le premier de cette page mais en revanche j'en est essayer plusieurs des menu de ce type mais dès que j'y insère mes image ça foire :/

Je vais tout de même réessaye celui la et je vous tiens au courant, je pense que je doit faire une erreur de configuration tout bêtement mais je ne voit pas laquelle ...

Merci d'avoir répondu.
Cordialement, NicoGT3

J'essaye de mettre en forme se menu, j'ai pour cela retirer les texte et remplacer par un espace insécable (temporairement) puis j'ai mis mes 5 première (enfin dernière puisque le menu est inversé a cause de float je croit ou une autre propriété CSS je sais plus) cependant je ne sais pas comment rajouter des onglet de Menu principale :/ (fonctionnelle bien entendu) Pouvez vous m'expliquez s'il vous plait ?

De plus, j'ai bien entendu modifier la taille des blocs des li afin de les ajuster a la taille de mes image mais du coup cela créé une erreur pour les sous-menu qui ne s'affiche pas correctement (une espèce de gros carré blanc apparait a coté d'eux) et également une faute de placement de ceux-ci.

Merci

**Jumano** · 18/02/2009, 12h36

Le mieux serait de poster ton code pour pouvoir le tester et voir le rendu ...

**NicoGT3** · 18/02/2009, 13h00

Je test le menu sur une page appart afin de voir si j'y arrive donc voici les élément :
Page 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
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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<title>Menu horizontal déroulant</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="centrer">
 
 
<div id="menu">
	<ul>		
		<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/liens.png" width="74" height="52" alt="liens" />
			<ul id="smenu5">
				<li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">&nbsp;</a>
					<ul class="dernier" id="smenu51">
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
 
					</ul>
				</li>
				<li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">&nbsp;</a>
					<ul class="dernier" id="smenu52">
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
 
					</ul>
				</li>
				<li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">&nbsp;</a>
					<ul class="dernier" id="smenu53">
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
 
					</ul>
				</li>
			</ul>
		</li>
		<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/forum.png" width="74" height="52" alt="forum" />
			<ul id="smenu4">
				<li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">&nbsp;</a>
					<ul id="smenu41">
						<li><a href="#">&nbsp;</a></li>
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">&nbsp;</a>
					<ul id="smenu42">
						<li><a href="#">&nbsp;</a></li>
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li><a href="#">&nbsp;</a></li>
			</ul>
 
		</li>	
		<li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/tutos.png" width="74" height="52" alt="tutoriaux" />
			<ul id="smenu3">
				<li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a href="#">&nbsp;</a>
					<ul id="smenu31">
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
 
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li><a href="#">&nbsp;</a></li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu35',true);" onmouseout="montre('smenu35',false);"><a href="#">&nbsp;</a>
					<ul id="smenu35">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu36',true);" onmouseout="montre('smenu36',false);"><a href="#">&nbsp;</a>
					<ul id="smenu36">
						<li><a href="#">&nbsp;</a></li>
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>			
		</li>
		<li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/tools.png" width="74" height="52" alt="tools" />
			<ul id="smenu2">
				<li><a href="#">&nbsp;</a></li>
 
				<li><a href="#">&nbsp;</a></li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu24',true);" onmouseout="montre('smenu24',false);"><a href="#">&nbsp;</a>
					<ul id="smenu24">
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
 
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>			
		</li>	
		<li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/fof.png" width="74" height="52" alt="style frets on fire" />
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
					<ul id="smenu11">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
					<ul id="smenu13">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>
		</li>
        <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/musiques.png" width="74" height="52" alt="musiques" />
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
					<ul id="smenu11">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
					<ul id="smenu13">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>
		</li>
        <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/jeux.png" width="74" height="52" alt="jeux" />
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
					<ul id="smenu11">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
					<ul id="smenu13">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>
		</li>
        <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/accueil.png" width="74" height="52" alt="accueil" />
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
					<ul id="smenu11">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
					<ul id="smenu13">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>
		</li>
 
	</ul>	
</div>	
</div>	
</body>
</html>

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
82
83
84
85
86
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
ul, li {
list-style-type:none;
}
 
/*chaque sous-menu*/
#menu ul li {
	position:relative;
	float:right;
	width:74px;
	cursor:pointer;
	display:block;
	background:none;
	height:52px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}

le JS ne change pas de l'original

Merci

**Jumano** · 18/02/2009, 16h36

Le problème est que ce script est fait pour 5 blocs, il te faut modifier les diverses dimensions pour l'adapter.
Si tu veux rajouter des blocs, il te faut les ajouter en haut du code et non à la suite.
De plus fait attention un "id" doit être unique sur une même page.

Décalage menu CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager