28182 sujets

CSS et mise en forme, CSS3

[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
Modérateur
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 Smiley cligne

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 Smiley cligne

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 Smiley cligne

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 Smiley cligne

Cdt


Je dois utiliser classList.add ou je dois me passer de javascript ?
Modérateur
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 &lt; x.length; i++) {
  x[i].addEventListener("click", function () {
    this.classList.toggle("hidden");
  });
}



OK. Merci. Je teste ça.

Pourquoi sans onclick ? Ca change quoi ?
Administrateur
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.
Modérateur
Si l'on utilise un el.addEventListener("click", function () {});, javascript ajoute le onclick ... (ou en remet une couche). Pas besoin de le mettre dans le HTML

Pour reprendre l'ensemble de ton idée, cela pourrait en final être 
const x = document.querySelectorAll("div.rubrique, div.pagemenu");
const y = document.querySelector("#menumobile");
  y.addEventListener("click", function () {
    this.classList.toggle("hidden");
    for (var i= 0; i<x.length; i++) {
      x[i].classList.toggle("hidden");     
    }
  });


exemple https://jsfiddle.net/b429y1jz/ ou https://jsfiddle.net/b429y1jz/1/ ?

Cdt
Modifié par gcyrillus (15 Oct 2021 - 08:25)
Meilleure solution
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&lt;x.length; i++) { x[i].classList.toggle("visible"); } 
var y = document.getElementById('menumobile').children[0];
if ( x[0].classList.contains("visible") ) 
	{ y.innerHTML = '&amp;equiv;'; }
else 
	{ y.innerHTML = '&amp;times;'; }
}


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" !!! Smiley lol
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à.
Administrateur
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) Smiley cligne
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) Smiley cligne


Smiley good
L'élément <button> n'a pas l'air d'être supporté depuis bien longtemps par contre (à part chez MS)...
Administrateur
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é...
Sujet clos
Aller à