Discussion :

[pito2901]

bonjour, je me trouve avec un probl�me tr�s basique mais tr�s aga�ant... Je souhaite, lorsque je clique sur ma div, qu'elle grandisse, que la couleur change, etc. mais je souhaite �galement la refermer lorsque je clique sur la "fl�che retour" or �a ne marche pas.

Voici le code en question:

Code css :

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
#crosscol{
margin:0;
}
.menuhoz{
background-color:#171717;
color:#ff9900;
height:50px;
width:50px;
line-height:50px;
text-align:center;
transition:all 0.5s;
}
.menuhoz:hover{
color:#171717;
background-color:#ff9900;
cursor:pointer;
}
.menuhoz #imgmenuhoz{
width:0px;
height:0px;
margin-top:2px;
margin-left:2px;
cursor:pointer;
float:left;
}

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
<div id="menuhoz" class="menuhoz">
<img id="imgmenuhoz" src="http://www.zupmage.eu/i/BdD50UvFdR.png"></img><span>MENU</span>
</div>

Code JS :

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
var MENUHOZ = document.getElementById("menuhoz")
var IMG = document.getElementById("imgmenuhoz")
 
MENUHOZ.style.cssText = 'transition:all 1s;';
IMG.style.cssText = 'transition:all 1s 1s;';
 
MENUHOZ.onclick = function(){
  MENUHOZ.style.cssText = 'background-color:#ff9900;color:#171717;cursor:default';
  MENUHOZ.style.width = '100%';
  MENUHOZ.style.height = '100px';
 
  IMG.style.width = '15px';
  IMG.style.height = '15px';
}
IMG.onclick = function(){
  MENUHOZ.style.cssText = 'background-color:#171717;;color:#ff9900';
  MENUHOZ.style.width = '50px';
  MENUHOZ.style.height = '50px';
 
  IMG.style.width = '0px';
  IMG.style.height = '0px';
};

Et la d�mo correspondante... Merci de noter les modifications sur votre post.

Merci pour votre aide, pito2901