[RESOLU] La nav responsive s'ouvre tout le temps

Hello

J'utilise cette barre : http://goetter.fr/nav/

Mais le probleme, à chaque fois que je recharge une page, elle s'ouvre et se ferme toute seul (ça dure même pas 1 seconde) mais c'est assez moche.

Une solution pour contourner le probleme ?

Bien Cordialement =)
Modifié par TrAsHeR51 (15 Jan 2016 - 22:58)

Bonjour,

C'est le temps de chargement du script qui provoque cet effet désagréable. En effet, tant qu'il n'est pas chargé le script ne s'applique pas sur l'élément cible, ce qui provoque un "saut" sur l'élément par la suite une fois le script opérationnel lorsqu'il cache l’élément.

Pour remédier à ce problème vous pouvez cacher par défaut l'élément en css avec un display:none.

Hello,

As-tu un exemple en ligne ?

son exemple c'est ça

display:none

tu dois le placer sur ta div en question

@Yordi : non désolé

Si je met un display: none; ça me masque le bouton du coup :o

Yordi a écrit :
Hello,

As-tu un exemple en ligne ?

Désolé Yordi je croyais que tu été l'auteur du message principale et que tu coup tu voulais un "exemple en ligne" du fameux "display none"

my bad

TrAsHeR51 a écrit :
Si je met un display: none; ça me masque le bouton du coup :o

Bien sûr. Il ne faut pas tout cacher mais seulement le contenu. Comme le fait le script.

Donc, à priori :

#navigation ul {
    display: none;
}

Modifié par Olivier C (15 Jan 2016 - 14:54)

wé mais il ne m'affiche plus le menu aussi, c'est pareil

Bon, j'ai mieux regardé le code. Vous pouvez mettre les mêmes règles que pour la classe .visually-hidden avec un media queries comme suit :

@media (min-width: 767px) {
  #navigation ul {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
  }
}

Bonjour,

A la fin de ton css, tu ajoutes comme on te l'a conseillé précédemment :

#navigation ul {display:none;}

A la fin de ton script, tu ajoutes le code suivant qui rétablira l'affichage du menu :

n.getElementsByTagName("ul")[0].style.display="block";

Amicalement,
Modifié par parsimonhi (15 Jan 2016 - 21:15)

Merci

Bonsoir,

À vrai dire, il s'agit d'un comportement souhaité, même s'il n'est peut-être pas 100% parfait.

La raison en est l'accessibilité : si le menu est masqué par défaut et que JavaScript n'est pas activé ou défaillant, alors le menu ne sera pas du tout accessible.

Mon choix a donc été de masquer le menu via JS après coup. Ainsi, même sans JS, la navigation demeure fonctionnelle.
En ce qui me concerne, je préfère ne pas faire l'impasse sur l'accessibilité.

Bonne soirée
Modifié par Raphael (16 Jan 2016 - 19:01)

Je comprends

Peut être détecter si JS est activé, si oui, ne rien faire, et sinon afficher la barre, ça serai plus propre et bien évidement accessible ^^
Modifié par TrAsHeR51 (16 Jan 2016 - 19:48)

TrAsHeR51 a écrit :
Peut être détecter si JS est activé, si oui, ne rien faire, et sinon afficher la barre, ça serai plus propre et bien évidement accessible ^^

En fait c'est ce qu'il se passe : si JS est activé, il masque le menu.
Le problème est que le temps du test, la navigation a bien entendu eu le temps de s'afficher.

Aucun moyen de bypasser ça ?

mettre un timer d'1sec où la nav est complétement masquée , et l'activer ou non?

Raphael a écrit :
La raison en est l'accessibilité : si le menu est masqué par défaut et que JavaScript n'est pas activé ou défaillant, alors le menu ne sera pas du tout accessible.

Effectivement, ma solution précédente n'est pas bonne du tout de ce point de vue.

On peut alors essayer l'alternative ci-dessous.

1) on ne touche pas du tout au css

2) on ajoute juste après le </nav> du menu la ligne de script ci-dessous de manière à cacher le menu au plus tôt :

document.getElementById(targetID).getElementsByTagName("ul")[0].style.display="none";

3) on ajoute à la fin du script de bas de page la ligne :

n.getElementsByTagName("ul")[0].style.display="block";

Ainsi, si javascript n'est pas activé, on pourra quand même naviguer normalement. Et s'il est activé, on ne devrait pas avoir le temps de voir s'afficher le menu sur les viewports étroits.

EDIT : éventuellement, on peut aussi essayer de ne pas faire du tout les modifications ci-dessus, et se contenter de déplacer le script de bas de page juste en dessous le </nav>.

Amicalement,
Modifié par parsimonhi (17 Jan 2016 - 04:23)