11521 sujets

JavaScript, DOM et API Web HTML5

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

Pages :
Modérateur
(reprise du message précédent)

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


C'est selon ton choix et les test que tu auras fait pour déterminer si il est judicieux de garder les deux ou pas, ... ma fille à un vieux sony de 21pouces tout en un et tactile (pas tester ton code avec cependant) , qu'elle utilise la plupart du temps au clavier et souris mais en se servant parfois du tactile . je dirais autant garder les deux et écouter les retours utilisateurs si tu peut en avoir pour determiner si le onclick est suffisant.

Pour le toggle(), cela me rappelle ce post Smiley cligne https://forum.alsacreations.com/topic-4-88922-1-Resolu-Menu-responsive-mobile-ne-reaparait-pas-en-mode-paysage.html
Modifié par gcyrillus (06 Jan 2022 - 15:00)
gcyrillus a écrit :


C'est selon ton choix et les test que tu auras fait pour déterminer si il est judicieux de garder les deux ou pas, ... ma fille à un vieux sony de 21pouces tout en un et tactile (pas tester ton code avec cependant) , qu'elle utilise la plupart du temps au clavier et souris mais en se servant parfois du tactile . je dirais autant garder les deux et écouter les retours utilisateurs si tu peut en avoir pour determiner si le onclick est suffisant.

Pour le toggle(), cela me rappelle ce post Smiley cligne https://forum.alsacreations.com/topic-4-88922-1-Resolu-Menu-responsive-mobile-ne-reaparait-pas-en-mode-paysage.html


LOL. Oui c'est le même menu !
Mais cette fois-ci le problème n'est pas sur le menu principal mais sur le sous menu.
D'ailleurs ce sous menu se déclenche aussi par le même :hover en version mobile hamburger et ne pose pas de problème de réaffichage après un display: none de tout le menu ; là il veut bien oublier qu'il a été survolé avant ! Y'a un truc qui m'échappe...
Modérateur
kerlutinoec a écrit :

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

ah oui !
kerlutinoec a écrit :

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


probablement parce que en survolant ou cliquant le sous-menu, le menu est lui aussi survoler / cliquer .

coté JavaScript regarde du coté de https://developer.mozilla.org/fr/docs/Web/API/Event/stopPropagation

Coté CSS , il faudrait revoir la logique des sélecteur et la je comprend un peu mieux l'idée des pointer-events:none/auto pour filtrer les éléments cliquable ou pas mais qui font toujours que le parent reçoit aussi le click même s'il n'est plus cliquable.

Cdt
gcyrillus a écrit :

ah oui !


probablement parce que en survolant ou cliquant le sous-menu, le menu est lui aussi survoler / cliquer .

coté JavaScript regarde du coté de https://developer.mozilla.org/fr/docs/Web/API/Event/stopPropagation

Coté CSS , il faudrait revoir la logique des sélecteur et la je comprend un peu mieux l'idée des pointer-events:none/auto pour filtrer les éléments cliquable ou pas mais qui font toujours que le parent reçoit aussi le click même s'il n'est plus cliquable.

Cdt


Brdl!, c'est compliqué ce Event.stopPropagation() !
Je crois avoir compris que lorsque mon sous menu disparait, c'est mon intitulé de menu qui récupère le :hover.
J'avais essayé de faire disparaitre tous le menu, intitulé inclus, pendant une fraction de seconde avec display:none. Mais ça n'a pas marché : le menu déroulé s'est réaffiché dès la réapparition. (Et en plus ça faisait un vilain clignotement à l'écran.) C'est pourtant comme ça que je gère le menu hamburger (display:none de tout le menu) et pas de réapparition du sous menu pourtant géré par :hover. C'est peut être parce que je dois cliquer sur le hamburger pour l'afficher d'où disparition du :hover du sous menu.
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 Smiley cligne

Cdt


C'est bon !

J'ai d'abord tenté d'utiliser stopPropagation() mais le menu ne voulait plus se rouvrir.
J'ai donc utilisé la méthode que tu m'as proposé à base de window.matchMedia :
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; 
		}

La seule concession c'est que sur petit écran (<1366px de large ; ça doit être rare de nos jours) il faut cliquer sur le sous menu pour le dérouler.
Le seuil est celui de l'iPad pro 12" en mode paysage (je ne connais pas de tablette plus grande ; au delà il faudra cliquer en dehors du sous menu pour le fermer).
(Une solution pour désactiver le :hover eut été plus élégante mais je pense qu'il est rare d'être en dehors de ces clous.)
Que pensez vous de ce seuil ?
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)
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)



Ça y est j'ai réussi !

<main onclick='fermermenu()'>
Pages :
Sujet clos
Aller à