18073 sujets

Questions générales et questions de débutants

[résolu] Pb menu vertical

Bonjour,

J'essaye le menu vertical du site.Il marche tres bien sauf quand je passe la souris dessus il y a que la premiere cellule qui change de couleur,comment dois je faire pour que toutes les cellules changent de couleur lors du passage de la souris?
Modifié par cedric1112 (27 Mar 2006 - 21:30)
il faut rajouter un lien aux menus qui n'en ont pas, pour que le hover fonctionne au passage de la souris

soit par exemple :
<dt onclick="javascript:montre('smenu2');"><a href="#">Menu 2</a></dt>
Merci ca fonctionne trés bien.

J'ai encore une question:

Je voudrais espacer les boutons du menu vertical,j'utilise margin: 12px 0;
ce qui fonctione mais ca espace aussi les sous menus ,j'ai pas le temps de cliquer sur un lien des sous menus il a le temps de serefermer ,je voudrais espacer les boutons du menu sans espacer les sous menu aux boutons.

Comment dois je m'y prendre?

Merci pour vos réponses.
perso pour éviter que le menu se referme trop vite, j'ai mis un timeout de 350ms quand on enlève la souris du menu avant qu'il ne se referme (bien sur, il faut faire un cleartimeout si tu "retourne" sur un menu ou sous menu, histoire qu'il ne se ferme pas meme si tu es dessus...)
cedric1112 a écrit :
Merci ca fonctionne trés bien.

J'ai encore une question:

Je voudrais espacer les boutons du menu vertical,j'utilise margin: 12px 0;
ce qui fonctione mais ca espace aussi les sous menus ,j'ai pas le temps de cliquer sur un lien des sous menus il a le temps de serefermer ,je voudrais espacer les boutons du menu sans espacer les sous menu aux boutons.

Comment dois je m'y prendre?

Merci pour vos réponses.


Je ne sais pas quel menu tu utilises (donne moi le lien si ma solution ne fonctionne pas)

Je pense que tu as mis :
margin: 12px 0;

sur :
dl#menu dt {

et puisque ça agit aussi sur tes sous-menus, ajoute :
margin: -12px 0;

à : 
dl#menu dd {

Normalement ça fonctionne Smiley biggrin
Merci ca fonctionne mais un nouveau probleme est aparus,le dernier sous menu est tronqué,j'ai éssayé d'ajouter "height:50px;" pour régler la hauteur des sous menus mais cela fait pas propre ca à une conséquence sur les autres sous menus.


#menu dd {
border: 1px solid black;
margin: -12px 0;
height:50px;
}



J'ai voulu éssayer de changer la hauteur du menu comme ceci mais ca n'a eu aucun effet:

#menu {
height:50px;
}

Modifié par cedric1112 (22 Mar 2006 - 19:42)
tu peux me donner le lien du menu que tu utilises stp car je peux pas t'aider sinon
je crois avoir la solution Smiley smile

J'ai tout d'abord tenté de donner une hauteur au dernier sous-menu comme ça :
css
dl#menu li.dernier {
height: 27px;
}
</div>

html
<li class="dernier"><a href="#">Sous-Menu 4.1</a></li>

mais la bordure du bas n'apparaîssait plus du fait de la marge "bottom" de -12px qu'on a mis là :
dl#menu dd {
border: 1px solid gray;
margin: -12px 0;
}

Je me suis donc dit qu'il fallait essayer de donner une bordure "bottom" au dernier "li"
Ma solution est donc la suivante :
tu gardes
dl#menu dt {
margin: 12px 0;
}

et
dl#menu dd {
margin: -12px 0;
}

seulement
et tu ajoutes :
css
#borderBottomDernier {
border-bottom: 12px solid gray;
}

html (juste après le dernier "li")
<div id="borderBottomDernier"></div>

Ca devrait marcher Smiley biggrin
tiens nous au courant stp

ps: si tu veux donner un tout petit espace entre les menus et sous-menus, comme sur le tuto original, mets seulement :
dl#menu dd {
margin: -10px 0;
}

et
#borderBottomDernier {
border-bottom: 10px solid gray;
}

en laissant
dl#menu dt {
margin: 12px 0;
}
Bonjour,

Merci pour ta solution mais je n'ai pas reussi à la mettre en place,voici mon code:
[code]<!--
body {
margin: 0;
padding: 0;
background: #0AC0F5;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 230;
left: 3;
}
#menu {
width: 12em;

}
#menu dt {
cursor: pointer;
margin: 12px 0;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid black;
background: #3399CC;
}
#menu dd {
border: 1px solid black;
margin: -12px 0;
}

#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover{ 
background: #0AC0F5;
}
#borderBottomDernier {
border-bottom: 12px solid gray;
}

#menu dt a:hover {
background: #ffffff;
}


j'ai toujours le dernier sous menu qui ne saffiche pas entierement.
mmmh, normalement ça devrait marcher avec ton css

as-tu bien ajouté ? :

<div id="borderBottomDernier"></div>

dans ton code html, après le dernier "li"
soit :

<dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<div id="borderBottomDernier"></div>
				</ul>
			</dd>

	
</dl>
Bonjour,


Ta solution fonctionne parfaitement,effectivement je n'avais pas rajouté le bout de code ds le html.
Peus tu m'expliquer un peu plus en détail a quoi cela correspond car cela fait tres peu de temps que je manipule le css.
Merci.
Je ne sais pas si j'ai bien tout compris moi-même Smiley lol mais je vais essayer

Quand tu as mis :
margin: 12px 0;

à tes <dt> (menus)
tu as ensuite du rétablir le margin des <dd> (sous-menus) en mettant :
margin: -12px 0;

mais ton dernier sous-menu n'avait pas d'autre sous-menu dessous pour le "pousser" vers le haut, il disparaissait donc pratiquement
donc on a mis une div sous le dernier sous-menu avec les attributs :
border-bottom: 12px solid gray;

pour le pousser vers le haut de 12px et lui mettre une bordure grise en bas
d'ailleurs on aurait pu aussi faire ça
margin-bottom: 11px;
border-bottom: 1px solid gray;

voilà, j'espère ne pas avoir dit de bêtises Smiley murf
Sujet clos
Aller à