Onclickout hors d’un div de menu

Version imprimable

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:

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 ?> <?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:

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...

30/07/2020, 15h23
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)
30/07/2020, 16h06
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...
30/07/2020, 16h33
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

Code:

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:

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:

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');
}

30/07/2020, 18h47
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