[Résolu] Comment refermer le menu

Bonjour,

Je me permets de poster ce message car je rencontre des difficultés quant à la mise en œuvre de la navigation d'un projet.

D'ores et déjà, je suis désolé de ne pas pouvoir vous donner un aperçu du projet via codepen (mes tentatives sont vaines). Je vais tâcher d'être le plus clair possible.

Aperçu vidéo : Ici (YouTube)

Concernant la navigation :
Lorsque nous cliquons sur "ouvrir le menu", le menu s'affiche avec un effet de perspective.
Afin de refermer le menu, il faut cliquer sur la page qui s'est mise en perspective.

Ce que j'aimerais obtenir
J'aimerais que le menu se referme lorsque :
- nous cliquons sur la page qui s'est mise en perspective (actuellement, c'est le cas. Tout va bien).
- nous cliquons, une nouvelle fois, sur "ouvrir le menu". (actuellement, ce n'est pas le cas. Comment faire ?).

Auriez-vous des pistes à me donner afin de résoudre ce "problème" ?

Les fichiers sont disponibles ici (j'ai veillé à supprimer tous les éléments inutiles afin d'aller à l'essentiel ) : Ici (wetransfer)

Merci du temps que vous accorderez à ma demande
Modifié par MickFR (11 Sep 2018 - 16:35)

Salut

J'ai jeté un œil par curiosité, pour un minimum c'est touffu coté code CSS et JS, pas eu le courage de tout regarder.

Je constate (comme vous) que le menu s'ouvre correctement au clic sur le lien "Ouvrir le menu" et se ferme correctement au clic sur la page "Bonjour" réduite et en perspective sur le côté droit de l'écran.

Le fonctionnement par défaut me semble parfait, je ne comprends pas pourquoi vouloir en changer. Mais bon, les goûts et les couleurs...

J'y arrive en modifiant très légèrement le code de menu.js (ajouter le if) :

showMenu.addEventListener(clickevent, function (ev) {
	ev.stopPropagation();
	ev.preventDefault();

	if (classie.has(perspectiveWrapper, 'animate')) {
		container.dispatchEvent(new Event('click'));
	} else {
		docscroll = scrollY();
		// change top of contentWrapper
		contentWrapper.style.top = docscroll * -1 + 'px';
		// mac chrome issue:
		document.body.scrollTop = document.documentElement.scrollTop = 0;
		// add modalview class
		classie.add(perspectiveWrapper, 'modalview');
		// animate..
		setTimeout(function () {
			classie.add(perspectiveWrapper, 'animate');
		}, 25);
	}
});

Bonjour,

Merci d'avoir pris le temps de jeter un œil

"Le fonctionnement par défaut me semble parfait, je ne comprends pas pourquoi vouloir en changer. Mais bon, les goûts et les couleurs..."

D'un point de vue ergonomique, il est, selon moi, préférable que l'utilisateur puisse de nouveau cliquer sur le bouton relatif au menu afin de le fermer. Même si, en effet, le script initial est fonctionnel.

Merci encore du temps que vous avez accordé à mon post.