[Résolu] Menu responsive mobile ne réaparait pas en mode paysage

Salut !

J'ai un menu bandeau en haut qui en mode mobile est réduit à un menu hamburger.
Le changement se fait à 767px afin que sur un grand mobile on puisse avoir la version desktop en mode paysage.
En mode desktop, les items du menu bandeau sont visibles et le logo hamburger masqué :

	.pagemenu, .rubrique { display: table; }
	#menumobile { display: none; }

En mode mobile c'est l'inverse :

@media (max-width:767px) {
	.pagemenu, .rubrique { display: none;  }
	#menumobile { display: table; }
 }

L'affichage des rubriques en mode mobile est géré par un javascript :

function togglemenu() {
const x = document.querySelectorAll("div.rubrique, div.pagemenu");
var y = document.getElementById('menumobile').children[0];
for (var i= 0; i<x.length; i++) {
	if ( x[i].style.display === 'table' ) 
		{ x[i].style.display = 'none'; y.innerHTML = '&equiv;'; }
	else 
		{ x[i].style.display = 'table'; y.innerHTML = '&times;'; }
	}
}

Ca fonctionne mais y'a un petit problème :
En mode mobile, si le menu hamburger a été utilisé au moins une fois (javascript) et est fermé, la rotation de l'écran ne réactive pas la visibilité des items du bandeau. (Sans aucune utilisation du menu hamburger ça marche.)
Ca semble donc venir du style.display = 'none' du javascript qui ne semble pas pourquoi être outrepassé par le CSS display: table;...

Pourquoi ? Que faire ?

Merci d'avance pour votre aide

Bonjour,

plutot que de faire un toggle sur le style display, utilises une class.
Ensuite cette class peut-être surcharger, squizzer ou appliquer uniquement via ton/tes médiaqueries comme le reste des styles de tes menus

En JavaScript, lorsque tu fais : element.style.truc="muche"; , cela génère (ou ajoute) au style attribut de l’élément la règle : <element style="truc:muche;" /> , il n' y a que !important dans la feuille de style pour passer outre , mais mauvaise pratique

Cdt
Modifié par gcyrillus (13 Oct 2021 - 12:02)

gcyrillus a écrit :
Bonjour,

plutot que de faire un toggle sur le style display, utilises une class.
Ensuite cette class peut-être surcharger, squizzer ou appliquer uniquement via ton/tes médiaqueries comme le reste des styles de tes menus

En JavaScript, lorsque tu fais : element.style.truc="muche"; , cela génère (ou ajoute) au style attribut de l’élément la règle : &lt;element style="truc:muche;" /&gt; , il n' y a que !important dans la feuille de style pour passer outre , mais mauvaise pratique

Cdt

Je dois utiliser classList.add ou je dois me passer de javascript ?

kerlutinoec a écrit :


Je dois utiliser classList.add ou je dois me passer de javascript ?

J'utiliserais perso classList.toggle('TaClass');

Cdt


edit , ce serait sans onclick dans le HTML : (à tester, en se basant sur une class hidden)

const x = document.querySelectorAll("div.rubrique, div.pagemenu");
for (var i = 0; i < x.length; i++) {
  x[i].addEventListener("click", function () {
    this.classList.toggle("hidden");
  });
}

Modifié par gcyrillus (13 Oct 2021 - 21:01)

gcyrillus a écrit :


J'utiliserais perso classList.toggle('TaClass');

Cdt


edit , ce serait sans onclick dans le HTML : (à tester, en se basant sur une class hidden)

const x = document.querySelectorAll("div.rubrique, div.pagemenu");
for (var i = 0; i < x.length; i++) {
  x[i].addEventListener("click", function () {
    this.classList.toggle("hidden");
  });
}

OK. Merci. Je teste ça.

Pourquoi sans onclick ? Ca change quoi ?

kerlutinoec a écrit :

Pourquoi sans onclick ? Ca change quoi ?

Hello,

Ça allège le HTML d'attributs parasites qui n'ont rien à voir avec du HTML.
Du coup, chaque techno fait son job de son côté (HTML pour la structure, JS pour le comportement), c'est plus facile à lire et à maintenir.

Bon alors j'ai fait un truc comme ça :

.visible { display: table; }
#menumobile { display: none; }
@media (max-width:767px) {
	.visible { display: none; }
	#menumobile { display: table; }
 }

et

function togglemenu() {
const x = document.querySelectorAll("div.rubrique, div.pagemenu");
for (var i= 0; i<x.length; i++) { x[i].classList.toggle("visible"); } 
var y = document.getElementById('menumobile').children[0];
if ( x[0].classList.contains("visible") ) 
	{ y.innerHTML = '&equiv;'; }
else 
	{ y.innerHTML = '&times;'; }
}

Tout marche bien.
Y'a juste un petit problème de logique : &equiv; (menu hamburger) et &times; (croix) ont du être inversé par rapport à ce qui serait logique. C'est étrange. ...Mais ça marche !

kerlutinoec a écrit :
Bon alors j'ai fait un truc comme ça :

.visible { display: table; }
#menumobile { display: none; }
@media (max-width:767px) {
	.visible { display: none; }
	#menumobile { display: table; }
 }

et

function togglemenu() {
const x = document.querySelectorAll("div.rubrique, div.pagemenu");
for (var i= 0; i<x.length; i++) { x[i].classList.toggle("visible"); } 
var y = document.getElementById('menumobile').children[0];
if ( x[0].classList.contains("visible") ) 
	{ y.innerHTML = '≡'; }
else 
	{ y.innerHTML = '×'; }
}

Tout marche bien.
Y'a juste un petit problème de logique : &amp;equiv; (menu hamburger) et &amp;times; (croix) ont du être inversé par rapport à ce qui serait logique. C'est étrange. ...Mais ça marche !

En fait en y réfléchissant, y'a plus de problème de logique si je renomme la class "visible" en "hidden" !!!

Raphael a écrit :

Hello,

Ça allège le HTML d'attributs parasites qui n'ont rien à voir avec du HTML.
Du coup, chaque techno fait son job de son côté (HTML pour la structure, JS pour le comportement), c'est plus facile à lire et à maintenir.

Je comprend le principe. Mais quand on lit le HTML on ne sait pas qu'il va se passer quelque chose à cet endroit là.

kerlutinoec a écrit :
Je comprend le principe. Mais quand on lit le HTML on ne sait pas qu'il va se passer quelque chose à cet endroit là.

Oui et c'est exactement pourquoi il est important de donner du sens (et la fonction des éléments) à HTML.

Par exemple, si ton déclencheur #menumobile est un élément <div>, tu ne donnes en effet aucune information. Par contre s'il s'agit d'un <button>, c'est parfaitement le rôle adapté et on se doute qu'une action sera associée (en JS)

Raphael a écrit :

Oui et c'est exactement pourquoi il est important de donner du sens (et la fonction des éléments) à HTML.

Par exemple, si ton déclencheur #menumobile est un élément &lt;div&gt;, tu ne donnes en effet aucune information. Par contre s'il s'agit d'un &lt;button&gt;, c'est parfaitement le rôle adapté et on se doute qu'une action sera associée (en JS)

L'élément <button> n'a pas l'air d'être supporté depuis bien longtemps par contre (à part chez MS)...

https://caniuse.com/?search=button
On a la liste des navigateurs et la date à laquelle ils ont commencé à supporte <button>

kerlutinoec a écrit :

L'élément &lt;button&gt; n'a pas l'air d'être supporté depuis bien longtemps par contre (à part chez MS)...

Tu dois confondre, l'élément <button> est compatible depuis la nuit des temps autant que je m'en souvienne (donc au moins depuis IE5 et le reste des navigateurs de cette époque lointaine) : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button#browser_compatibility

PapyJP a écrit :
https://caniuse.com/?search=button
On a la liste des navigateurs et la date à laquelle ils ont commencé à supporte &lt;button&gt;

Le tableau n'est pas très explicite malheureusement : la plupart des cases en gris on un support "unknown" (non testé)... mais l'élément est bel et bien supporté depuis très longtemps partout.

Raphael a écrit :

Le tableau n'est pas très explicite malheureusement : la plupart des cases en gris on un support "unknown" (non testé)... mais l'élément est bel et bien supporté depuis très longtemps partout.

Ah OK !
C'est trompeur ce grisé...

Marquer le sujet comme résolu