[Résolu] Menu overlay et retour en arrière du navigateur

Bonjour à tous,

ma question va peut-être en faire rire certains, mais je débute.

J'ai remarqué et ceci sur de nombreux sites qui utilisent des menus overlay un truc un peu bizarre !

J'ai mis un exemple (code issu de www.w3schools.com) en ligne : https://www.6ro.fr/menu/menu.html

Quand on est sur la page, on ouvre l'overlay et on clique sur un des liens (about pour mon exemple) on est redirigé sur une autre page. Jusqu'ici tout va bien.

Par contre, sur certains navigateurs, quand on clique sur la flèche retour en arrière, on tombe sur notre page précédente et le menu est resté ouvert.

Surement normal, puisque le js ne lui demande pas de se fermer ! Mais il y'a beaucoup de webmaster que ça ne dérange pas, moi si.

Si quelqu'un à une idée pour m'aider.

Merci d'avance.

Personne pour m'aider ?

J'ai un début de piste, fermer avec js l'overlay quand on clique sur un lien mais il risque d'avoir un conflit entre le js et la direction du lien !!!

Merci d'avance.

Bonjour
Je pense que c'est le même genre de solution que la fois précédente: mettre en js un eventListener sur chaque balise <a> du menu pour fermer l'overlay.
Tu devrais pouvoir t'inspirer de la solution que je t'ai proposée dans https://forum.alsacreations.com/topic-5-84012-1-Resolu-Fermeture-Overlay.html

Bonjour PapyJP,

La solution de l'autre fois ferme bien l'overlay mais je me suis rendu compte qu'il y avait un problème entre le délais de fermeture et la bascule vers la page appelée par le lien et ça fait bizarre, l'overlay reste figé entre deux à un moment !

Je voudrai mettre quelque chose dans le style :

getElementById("overlay").style.visibility= "hidden";

cacher la div au lieu de rejouer le toggle, mais une fois caché elle ne se réouvre pas !

Merci à toi.

car il faut la rebasculer en
getElementById("overlay").style.visibility= "visible";
quand tu click tu ton hamburger

J'y avais pensé mais ce que je ne maîtrise pas c'est de l'ordre dans lequel les js agissent !

L'ouverture de l'overlay est animé, le .style.visibility= "visible"; est-il prioritaire sur le

function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

Merci.
Modifié par 6ro (20 Nov 2018 - 14:18)

Ouais! C'est le genre de chose qui arrive avec les animations
Je pense que le problème vient de ce que l'animation est déclenchée par JS et l'appel de la page par <a href="...">, on a des croisements de fronts qui de plus doivent dépendre des navigateurs.
Les <a href="..."> datent de l'origine du web, il n'y avait pas d'animation à cette époque.

Un menu c'est du type:

<nav>
  <ul>
    <li>Entrée 1</li>
    <li>Entrée 2<li>
    ..........................
  </ul>
</nav>

(avec un CSS approprié bien entendu)

Plutôt que d'écrire pour chaque entrée

<li><a href="...">Entrée i</a></li>

Il est préférable de mettre un traitement de l'évènement "click" sur chaque <li> et d'effectuer ce qu'on veut faire lors de ce traitement, par exemple
1) cacher le menu
2) aller à la page cible par document.location="..."
C'est peut être un peu plus compliqué à écrire, mais si on fait tout par js on a beaucoup moins de risque de tomber sur ce genre de problèmes.

Effectivement, quoi que je fasse, les croisements de fronts posent problème.

Par contre pour ta solution avec document.location="...", je suis totalement perdu...

Merci.

Quand tu dis

<a href="xxx">Entrée 1</a>

ce qui se passe quand on clique sur "Entrée 1" c'est que le navigateur change l'adresse courante de la page pour "xxx".
Quand on écrit en JavaScript

document.location = "xxx";

c'est le moteur JavaScript qui dit au navigateur de changer l'adresse su document en "xxx".
Le résultat est le même, mais si tu mets (pour simplifier)

<li onclick="toTheJob()">Entrée 1 </li>

et qu'il y a une fonction JavaScript telle que

function doTheJob {
   action1();
   action2();
   .....
   document.location = "xxx";
}

tu es sûr que action1() et action(2) ont été exécutées avant que le changement de page se produise lorsque tu cliques sur le texte.
Modifié par PapyJP (20 Nov 2018 - 17:10)

Merci, je vais essayer de me pencher dessus demain matin.
En gros, il faut que je mette 1 fonction doTheJob différente sur chaque lien ?
Petite question : le js fait les actions dans l'ordre 1,2... ?
Modifié par 6ro (20 Nov 2018 - 17:27)

6ro a écrit :
Merci, je vais essayer de me pencher dessus demain matin.
En gros, il faut que je mette 1 fonction doTheJob différente sur chaque lien ?
Petite question : le js fait les actions dans l'ordre 1,2... ?

LE JS fait les actions dans l'ordre, sauf bien entendu les appels AJAX asynchrones, mais ce n'est pas le cas.
Par contre si tu fais les différentes actions sous la forme de

element.addEventListener('click', action1);
element.addEventListener(click', action2);
...

il n'est pas certain qu'ils se déclenchent dans l'ordre.

Dans ton cas on pourrait mettre quelque chose comme

<nav>
  <ul>
        <li onclick="doTheJob('adresse1')">Entrée 1</li>
        <li onclick="doTheJob('adresse2')">Entrée 2</li>
        .................................
  </ul>
</nav>

avec

function doTheJob(adresse) {
    /* du code pour faire toutes les actions communes, par exemple cacher l'overlay  */
    document.location = adresse;
}

ça permettrait de ne pas définir autant de fonctions que d'entrées dans le menu.
L'intérêt de "onclick" c'est que l'adresse de la page à appeler est dans l'appel de la fonction, alors que si tu utilises un addEventListener('click', doTheJob) il faut que la fonction doTheJob récupère l'adresse en question, ce qui complique un peu la programmation, même si ça présente d'autres avantages dans d'autres cas.
Modifié par PapyJP (20 Nov 2018 - 18:15)

Donc dans ce cas, je remplace les adresse1, adresse 2... par mes liens et je mets mes actions les une à la suite des autres dans le js ?

PapyJP,

merci ça fonctionne quasi bien, sauf que l'action de fermeture se fait après la redirection.

Quand j'utilise la flèche arrière du navigateur, après être arrivé sur la page destination, c'est alors là que la fermeture se fait !

function doTheJob(adresse) {
    document.getElementById("myNav").style.height = "0%";
    document.location = adresse;
}

N'y a t'il pas moyen de donner une sorte de délai entre l'action 1 et l'action 2.

Merci.

Bizarre!
on peut mettre un timeout et déclarer que le changement d'adresse aura lieu après un certain temps

function doTheJob(adresse) {
    document.getElementById("myNav").style.height = "0%";
    setTimeout(function(){
          document.location = adresse;
    }, 500);
}

c'est à dire: dans 500 millisecondes lancer une fonction qui ne fait rien d'autre que changer l'adresse de la page.
(Je n'ai pas testé...)

Merci ça à l'air de bien fonctionner !