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

[Crackerz]

Bonjour,

Le soucis viens du fait qu'en utilisant le DOM-0 vous ne pouvez définir deux fois le même événements (onclick dans votre cas)
La solution consiste à utiliser la méthode addEventListener() qui vous permettra de créer plusieurs événements click.
De plus, les éléments enfants de votre div hérite de l'événement or votre flèche à son propre événement...

[pito2901]

Ouaou ! Je m'attendais à un truc plus simple, du coup ça donnerait quoi si on adaptait votre astuce à mon code ?

[Crackerz]

Entre temps j'ai éditer mon message ( voir la dernière ligne ), pour l'utilisation de la méthode précédente :

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
    MENUHOZ.addEventListener('click',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.addEventListener('click', 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';
 
    });

Cependant lorsque vous cliquez sur la flèche vous cliquez sur le div donc à la fin vous ne voyez pas le changement mais il est présent, il faut gérer l'héritage de l'événement ou sortir la flèche du div à vous de voir ...

[pito2901]

Merci, mais votre code ne fonctionne pas...

Cependant lorsque vous cliquez sur la flèche vous cliquez sur le div donc à la fin vous ne voyez pas le changement mais il est présent, il faut gérer l'héritage de l'événement ou sortir la flèche du div à vous de voir ...

Que faut-il changer dans l'héritage ?

[Crackerz]

C'est normal que cela ne fonctionne pas puisque l’événement se propage à l'enfant Img. Une solution en partant de votre code pourrait être :

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
 var MENUHOZ = document.getElementById("menuhoz")
    var IMG = document.getElementById("imgmenuhoz")
 
    MENUHOZ.style.cssText = 'transition:all 1s;';
    IMG.style.cssText = 'transition:all 1s 1s;';
 
    MENUHOZ.addEventListener('click',function(e){
 
        var relatedTarget = e.target;
 
        if(relatedTarget.nodeName != 'IMG') //A remplacer par == DIV si vous compté mettre d'autre événement dans ce div
        {
            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.addEventListener('click', 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';
 
    });

A noter que des adaptations de ce code sont à prévoir selon les différents navigateur notamment IE qui ne supporte pas addEventListener() et target mais respectivement attachEvent() et srcElement.

[SpaceFrog]

Ne serait il pas plus simple d'avoir un flag boolean et une seule fonction ?
http://jsfiddle.net/hRjvT/

[pito2901]

Ça marche super ! Merci. (Je passerai à la compatibilité des navigateurs plus tard...)

[pito2901]

Dernière question, due à un problème d'affichage, j'ai modifié le code, mais à présent, j'ouvre le menu tout va bien, je le referme tout va bien mais lorsque je le re-ouvre, la transition se fait mal...

Je vous laisse regarder ici.

et 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.menuhoz{
background-color:#171717;
color:#ff9900;
height:50px;
width:50px;
line-height:17px;
text-align:center;
transition:all 0.5s;
border-radius:10px;
}
.menuhoz:hover{
color:#171717;
background-color:#ff9900;
cursor:pointer;
}
.menuhoz #imgmenuhoz{
position:relative;
float:left;
margin-left:4px;
margin-top:3px;
width:0px;
height:0px;
opacity:0;
visibility:hidden;
cursor:pointer;
}
#menuhozint{
opacity:0;
visibility:hidden;
margin-top:10px;
}
#menuhozint a{
margin-left:50px;
margin-right:50px;
text-decoration:none;
color:#171717;
}
#menuhozint img{
height:80px;
width:80px;
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="menuhoz" class="menuhoz">
<img id="imgmenuhoz" src="http://www.zupmage.eu/i/0ZF13hbRGS.png"></img><br />
<span>MENU</span>
<div id="menuhozint">
<a href="http://tutosaf.blogspot.fr/p/page-en-onstruction.html"><img src="http://www.zupmage.eu/i/EgEhCBE9xF.ico" title="Tutoriels"></img></a>
<a href="http://tutosaf.blogspot.fr/p/page-en-onstruction.html"><img src="http://www.zupmage.eu/i/9g1Lpw8MI2.ico" title="Plug-ins"></img></a>
<a href="http://tutosaf.blogspot.fr/p/page-en-onstruction.html"><img src="http://www.zupmage.eu/i/iixOrxrQo2.ico" title="Templates"></a>
</div>
</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
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
var MENUHOZ = document.getElementById("menuhoz")
var IMG = document.getElementById("imgmenuhoz")
var INT = document.getElementById("menuhozint")
 
    MENUHOZ.style.cssText = 'transition:all 1s;';
    IMG.style.cssText = 'transition:opacity 1s;';
	INT.style.cssText = 'transition:all .5s .5s;';
 
	IMG.style.visibility = 'hidden';
	INT.style.visibility = 'hidden';
 
    MENUHOZ.addEventListener('click',function(e){
 
        var relatedTarget = e.target;
 
        if(relatedTarget.nodeName != 'IMG') //A remplacer par == DIV si vous compté mettre d'autre événement dans ce div
        {
            MENUHOZ.style.cssText = 'background-color:#ff9900;color:#ff9900;cursor:default';
            MENUHOZ.style.width = '100%';
            MENUHOZ.style.height = '150px';
 
			IMG.style.height = '15px';
			IMG.style.width = '15px';
            IMG.style.visibility = 'visible';
			IMG.style.opacity = '1';
 
			INT.style.visibility = 'visible';
			INT.style.opacity = '1';
        }
 
    });
 
    IMG.addEventListener('click', function(){
 
        MENUHOZ.style.cssText = 'background-color:#171717;;color:#ff9900';
        MENUHOZ.style.width = '50px';
        MENUHOZ.style.height = '50px';
 
		IMG.style.cssText = 'transition:opacity 0s;';
		IMG.style.height = '0px';
		IMG.style.width = '0px';
        IMG.style.visibility = 'hidden';
 
		INT.style.cssText = 'transition:all 0s .1s;';
		INT.style.visibility = 'hidden';
		INT.style.opacity = '0';
 
    });

Merci pour votre aide.