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)

[Invité]

FLUUUUUUUUUUUUUUUTE !!!

Je viens de me rendre compte que hover ça fonctionne pas sur IE !!!! Qqun a une alternative ?

MERCI BILOU !!

[masu]

la pseudo-class :hover fonctione sur les liens sans probleme sous IE.
La solution est soit de mettre une blise <a> soit de le faire via un javascript.

[Invité]

Oui sur les liens elle fonctionne mais pas sur les div

[Invité]

Quelqu'un aurait un tutoriel pour créer un menu de ce style ? je ne trouve pas