Discussion :

[Invité]

Alors voilà. Je suis en train de construire un site web et j'ai envie de mettre un menu mobile. Le problème c'est que je ne sais pas comment faire pour cacher le menu quand celui-ci est en dehors du cadre : ici

mon 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
#menu
{
	position:relative;
	top:100px;
	left:-180px;
	width:200px;
	height:200px;
	background-color:#00FFCC;
	text-decoration:none;
	text-align:center;
}
 
#menu:hover
{
	left:0px;
	background-color:#00FFCC;
}

[blueice]

avec visibility:hidden non ?

[Invité]

C'est ce que je pensais au départ mais le problème c'est qu'avec hidden, le #menu:hover ne marche pas. La souris ne survol jamais le menu invisible.

[MasterOfChakhaL]

Cela te conviendrait-il?

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
/* Menu */
#menu
{
	position:relative;
	top:100px;
	left:0px;
	width:20px;
	height:200px;
	background-color:#00FFCC;
	text-decoration:none;
	text-align:center;
}

#menu * {
	visibility:hidden;
}

#menu:hover
{
	width:200px;
}
#menu:hover * {
	visibility: visible;
}

[Invité]

hum hum...

je comprends pas à quoi #menu* ...

[MasterOfChakhaL]

ca veut dire que tout ce que tu peux mettre dans menu sera caché en mode "replié" (mais pas l'élément menu lui-même, juste sa descendance)

J'ai mis * car je ne sais pas exactement ce que contiendra ton menu
Tu peux être plus précis en ne cachant que les liens (menu a) ou bien des éléments qui ont une classe en commun (menu .a_cacher)