Discussion :

[genesia]

Bonjour,
Je ne suis pas un grand expert en JS, donc ma question va surement être primaire pour beaucoup d’entre vous…
Voilà mon problème, j’ai un petit menu dans un DIV qui apparaît quand on clique sur une icône, il disparaît quand on re-clique dessus, jusque-là, tout va bien… ce que je désirais faire car je trouve cette manip un peu primaire, c’est de pouvoir aussi cliquer hors du Div pour le faire disparaître.

Merci de votre aide, pour m’aider à faire cela ou m’expliquer…

Code HTML :

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

1
2
3
<div id="myLinks" style="background-color: #333;-moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px;">
<a href="<?php echo $rewight_langue.$url_menu2.$rewight_langue_interne.$ancre_menu2.$menu_suite; ?>"><?php echo $icones_fafa2 ?>&nbsp;<?php echo $donnees2['nom_menu_'.$lang] ?></a>
<div><a href="javascript:void(0);" class="icon" onclick="myFunction()" ><img src="boutons/bouton_menu01.png" onmouseover="this.src='boutons/bouton_menu02.png'" onmouseout="this.src='boutons/bouton_menu01.png'" width="62" height="62" /></a></div></div>

Et le Javascript..

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function myFunction() {
 var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
  if (x.style.display("myLinks").length == 0)
}
</script>

Merci...

[Doksuri]

il faut que tu rajoutes un div "sous" le menu, mais "au dessus" du reste du site (z-index) qui fait width:100% & height:100%
et quand tu cliques sur ce fameux div, tu masques le menu (et ce div)

ps : il faut eviter de modifier du style en JS : l'ideal est de ne jouer qu'avec l'ajout/supression de classes CSS (et c'est le css qui s'occupe du style)

[genesia]

Bonjour,
Je vois ce que tu veux dire mais c'est compliquer vu la configuration de ma page, elle est construite avec des includes, un header, un main et un footer... le menu est entre le header et le main, mais dans le petit javascript, on ne peut pas donner une instruction close ou autre avec la function onclickout ?? je ne sais pas comment faire cela... mais c'est une question...

[SpaceFrog]

Ou que tu récupères lors du click de la page le target, et si ce n'est pas le div tu trigger le click du div

[Doksuri]

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="menu">
mon menu
</div>
<div id="show">
afficher le menu
</div>
<div id="closeMenu"></div>
</div>

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
#container {
  width:300px;
  height:300px;
  background-color:rgba(0,0,255,.5);
  position:relative;
}
#menu {
  width:100px;
  height:150px;
  background-color:green;
  position:absolute;
  top:0;
  left:0;
  display:none;
  z-index:10;
}
#menu.show { display:block; }
 
#closeMenu {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  z-index:5;
}
#closeMenu.show { display:block; }

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
document.getElementById('show').addEventListener('click', showMenu);
document.getElementById('menu').addEventListener('click', hideMenu);
document.getElementById('closeMenu').addEventListener('click', hideMenu);
 
function showMenu() {
	document.getElementById('menu').classList.add('show');
  document.getElementById('closeMenu').classList.add('show');
}
 
function hideMenu() {
	document.getElementById('menu').classList.remove('show');
  document.getElementById('closeMenu').classList.remove('show');
}

[genesia]

Merci Doksuri, je vais tester cela et essayer de l'adapter a mon code, j'ai mis mon code actuel sur CodePen, car je pense que je m'expliquais mal...
https://codepen.io/thierry-jourdain/pen/bGEPxxe

C'est épuré car c'est normalement lié a la base et il n'y pas le system d'include, mais c'est ce proche de la page actuelle... j'essaye ton code et je te reviens pour te dire.

PS: je n'utilise pas toujours la page CSS car j'ai fait une interface lié a la base pour pouvoir changer les couleurs et images facilement sans avoir a toucher au code, donc j'emplois les styles sur les div quand c'est nécessaire. Je fais aussi cela avec certain JS quand c'est possible.

Merci