[Résolu] Refermer menu :hover lors d'un clic

kerlutinoec a écrit :


Petite question :
Si le toggleMenu se déclenche sur tactile, la fonction :hover n'aura pas lieu ???
(Ou faut-il que je la désactive entre 768 et 1366px ?)

kerlutinoec a écrit :

LOL. Oui c'est le même menu !

kerlutinoec a écrit :

Y'a un truc qui m'échappe...

gcyrillus a écrit :
Bonsoir,

Merci pour le codepen, cela parait plus clair .

pour reprendre l'idée d'une checkbox parfois utilisée en se servant de classList.toggle() dans ton code, on peut faire quelque chose comme :

window.onload = fermermenu();
window.onresize = fermermenu();

function toggleMenu() {
  const y = document.querySelectorAll("div.sousmenu");
  y[0].classList.toggle("sousmenuvisible");
}

function fermermenu() {
  if (window.matchMedia("(max-width: 700px)").matches) {
    toggleMenu();
  } else {
    /* besoin de rien en principe desktop   ... */
    console.log("click");
  }
}

et en ajoutant la fonction fermermenu() aussi sur le lien informations. <a href="#nogo" onclick="fermermenu();">
Informations
</a>

https://codepen.io/gc-nomade/pen/xxXzPaV

Les pointer-events n'ont pas l'air d'avoir d'utilité ici.

C'est une autre piste

Cdt

function togglesubmenu() {
if (window.matchMedia("(max-width: 1366px)").matches) {
	const y = document.querySelectorAll("div.sousmenu");
	y[0].classList.toggle("sousmenuvisible");
	}
}

<div class="rubrique visible">
	<a href="#nogo" onclick="togglesubmenu();">
	Informations
	</a>
	<div class="sousmenu">
		<div class="pagesousmenu">
			<a href="#infos1" 
			onclick="togglesubmenu();">
			infos1
			</a>
		</div>
		<div class="pagesousmenu">
			<a href="#infos2" 
			onclick="togglesubmenu();">
			infos2
			</a>
		</div>
		<div class="pagesousmenu">
			<a href="#infos3" 
			onclick="togglesubmenu();">
			infos3
			</a>
		</div>
		<div class="pagesousmenu">
			<a href="#infos4" 
			onclick="togglesubmenu();">
			infos4
			</a>
		</div>
	</div>
</div>

.rubrique {
		float:left;
		position:relative;
		width:25%;
		height: 46px;
		text-align:center;
		font-size:1.125em;
		display: table;
		}
.sousmenu {
		position: absolute;
		left: 0;
		top: 46px; 
		z-index: 2;
		width: 100%;
		background-color: #676767;
		box-shadow: 1px 1px 8px #333333;
		max-height: 0%; 
		overflow: hidden; 
		transition: all 0.5s ease;
		}
.sousmenuvisible { max-height: 500%; }
@media (min-width:1367px) { .rubrique:hover .sousmenu { max-height: 500%; } }
.pagesousmenu { 
		border-top: 1px solid #797979; 
		border-bottom: 1px solid #000;
		width: 100%; 
		text-align: center; 
		display: table; 
		}

kerlutinoec a écrit :
Dernier petit problème :
Ayant dû désactiver le :hover en mode de fonctionnement par clic ("mode tablette") afin que le sous menu accepte de se refermer en cliquant sur un item, ce sous menu ne se referme plus quand on clic en dehors de celui ci.
J'ai rajouté une fermeture du sous menu sur les autres items du menu principal mais comment faire pour avoir la même chose en cliquant n'importe où dans la page ? (sans que ça impacte les liens de la page)

<main onclick='fermermenu()'>