Menu capricieux en responsivité

**JPBruneau** · 12/02/2020, 04h04

Bonjour,
J'ai du mettre dans la barre de menu deux menus identiques pourquoi ?
au départ j'avais cela;(en Grid)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<menu class="menu">
<div class="LeMenu" id="LeMenu">
  <header>
   <nav>
    <a href='fr_fi_email.php'  class='Bouton-Menu'> NOUS JOINDRE  </a>
    <a href='outil_cherche.php'  class='Bouton-Menu'> RECHERCHE  </a>
    <a href='fr_fi_blog.php'  class='Bouton-Menu'>LE BLOG  </a>
    <a href='fr_fi_metier.php'  class='Bouton-Menu'>  NOTRE METIER </a>
    <a href='wphoto.php'  class='Bouton-Menu'> PHOTOS  </a>
    <a href='fr_fi_lien.php'  class='Bouton-Menu'>  COUPS DE COEUR </a>
    <a href='fr_fi_evenement.php'  class='Bouton-Menu'> EVENEMENT  </a>
   </nav>
  </header>
 </div>
</menu>

avec ce fonctionnement en CSS plus le bouton vas et vient javascript

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
div.LeMenu { height :auto;width :auto; max-width :1900px; margin :auto; text-align :center;display:block;}
a.Bouton-Menu { padding: 5px;}
a.Bouton-MenuA { padding: 5px;}
nav {  display:flex;  justify-content:center;  flex-wrap:wrap;}
nav a {  margin: auto; }
.Bouton-Menu {
	display: inline-block;vertical-align: baseline;	margin: 0 20px;	outline: none;	cursor: pointer;
	text-align: center;	text-decoration: none;	font: 20px Arial, Helvetica, sans-serif;padding: .5em 2em .55em;
	border-radius: 30px;
    color: #ffffff;	border: solid 1px #ffffff;	background: #577bac;
}
.Bouton-Menu:hover {	
    text-decoration: none; background: #577bac; color: #ffaaaa;	border: solid 1px #ffaaaa;
}
.Bouton-MenuA {
	display: inline-block;vertical-align: baseline;	margin: 0 20px;	outline: none;	cursor: pointer;
	text-align: center;	text-decoration: none;	font: 20px Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);
		border-radius: 30px;
    color: #ffaaaa;	border: solid 1px #ffaaaa;	background: #577bac;
}
@media (min-width: 750px) and (max-width: 1300px) {
nav {  display:flex;  justify-content:center;  flex-wrap:wrap;}
nav a {  margin: auto; }
div.LeMenu { top:0px;height :auto;width :auto; max-width :1900px; margin :auto; text-align :center;display:block; }
div.Cmd-Menu { position :fixed; top :4px; right :4px; overflow :hidden; z-index :50;display:none;  }
}
 
@media (max-width:750px){
nav {    flex-direction: column;    width : 90%;  }
div.LeMenu { top:0px;height :auto;width :auto; max-width :90%; margin :auto; text-align :center;}
div.Cmd-Menu { position :fixed; top :4px; right :4px; overflow :hidden; z-index :50;display:block;display:none;}
}

et donc en 650px le bouton javascrit apparait

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function AfficherCacher(texte,quoi)  {
  if(quoi=="") {   
    var test = document.getElementById(texte).style.display;
    if (test == "block")  { document.getElementById(texte).style.display = "none"; }
    else  {  document.getElementById(texte).style.display = "block"; }
    }
  if(quoi!="") {
    document.getElementById(texte).style.display = quoi;   /* block ou none */
    }    
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class='Cmd-Menu' id='Cmd-Menu'>
<img  src='zzz/menuclic.png' alt='Menu' onclick='AfficherCacher(\"LeMenu\",\"\");return false;'>  
</div>

Avec cette disposition, choses que ne voient pas les visiteurs ...
si j'inspecte et demande l’affichage portable le menu disparaît , parfait et le bouton menu est la.
1) si je reviens en vision normale le menu réapparaît (parfait)
2) si avant de revenir je clic mon bouton le menu apparaît et si je reclic il disparaît
Alors revenant a la vision grand écran, le menu ne réapparait pas.

Je suis donc dans l'obligation d'avoir dans la barre menu deux fois le même menu
l'un dédié au grand écran, l'autre aux portables Un Bug ??
Vous avez une idée ??

Invité · 12/02/2020, 09h09

Bonjour,

avant de parler du bouton, il faut revoir les codes.
Déjà, tu parles de "grid", alors qu'il n'y en a pas...

1- Le code HTML est inutilement complexe :

balise <menu> expérimentale (Firefox et Edge uniquement)
<header> qui n'a rien à faire là (le menu peut être dans le <header> si tu veux, mais ça n'influe en rien)
classe superflues
...

Ceci suffit :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<nav id="LeMenu">
  <a href="fr_fi_email.php">Nous rejoindre</a>
  <a href="outil_cherche.php">Recherche</a>
  <a href="fr_fi_blog.php">Le Blog</a>
  <a href="fr_fi_metier.php">Notre Métier</a>
  <a href="wphoto.php">Photos</a>
  <a href="fr_fi_lien.php">Coups de Coeur</a>
  <a href="fr_fi_evenement.php">Evènements</a>
</nav>
<div id="CmdMenu" title="Afficher/Masquer le Menu">☰</div>

Pour cibler les <a> :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

#LeMenu > a {...}

Et si tu veux vraiment l'écrire en majuscules : text-transform: uppercase;.

2- Le code CSS comporte des tas d'instructions inutiles et/ou redondantes, voire contradictoires (sans compter que tout est en vrac, avec des espaces n'importe où)
Il faut, là aussi, le SIMPLIFIER.

UN BON CODE EST UN CODE SIMPLE.

Dès que ça devient trop compliqué ou fastidieux, c'est qu'il y a certainement une meilleure façon de faire.
(surtout ici, où le menu est TRÈS basique !)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/* MENU */
#LeMenu { 
  max-width:1400px; 
  margin:0 auto;
  display:flex;
  justify-content:center;
}
#LeMenu > a { 
  padding:5px 15px; 
  margin:0 5px;
  text-decoration:none;
  font: 1em Arial, Helvetica, sans-serif;
  text-transform:uppercase; /* en majuscules */
  color:#fff;
  border:solid 1px #fff;	
  background: #577bac;
  border-radius:30px;
  text-align:center;
}
#LeMenu > a:hover {	
  background:#ffaaaa; 
  color: #577bac;	
  border: solid 1px #577bac;
}
 
/* bouton menu burger */
#CmdMenu { 
  position :fixed; 
  top :4px; 
  right :4px; 
  z-index :50;
  padding:5px 8px; 
  color:#fff;
  background: #577bac;
  border-radius:5px;
  cursor:pointer;
}
#CmdMenu:hover {	
  background:#ffaaaa; 
  color: #577bac;	
  border: solid 1px #577bac;
}
/* MOBILE FIRST */
#LeMenu {
  flex-direction:column;
}
#CmdMenu { 
  display:block;
}
/* TABLET - DESKTOP */
@media (min-width: 769px) {
  #LeMenu {
    flex-direction:row;
    flex-wrap:wrap;
  }
  #CmdMenu { 
    display:none;
  }
}
/* TABLET */
@media (min-width: 769px) and (max-width: 1200px) {
}
/* DESKTOP */
@media (min-width:1201px) {
}

3- Quant à ta problématique (enfin) :
Quand on rajoute du code CSS via JavaScript, il est forcément ajouté "en ligne de code".
En inspectant (F12), on verra : <..... style="display:block;">.
Or, ce CSS "en ligne de code" est prioritaire sur celui écrit dans le fichier CSS.

Donc, pour le modifier, il faut encore passer par JavaScript :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
window.onresize = function(){
   // on teste la largeur de la fenêtre
   var ww = window.innerWidth; // en pixels
   if( ww > xxx )
   {
     ...
   } else {
     ...
   }
}

On obtient :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"use strict";
window.addEventListener("DOMContentLoaded", (event) => {
  /* MENU */
  const LeMenu = document.getElementById("LeMenu");
  const CmdMenu = document.getElementById("CmdMenu");
  CmdMenu.addEventListener('click',function(){
    LeMenu.style.display = (LeMenu.style.display == 'none')? '':'none';
  });
  // au chargement de la page
  window.onload = function(){
    // on teste la largeur de la fenêtre
    var ww = window.innerWidth; // en pixels
    LeMenu.style.display = ( ww > 768 )? '':'none';
    CmdMenu.style.display = ( ww > 768 )? 'none':'';
  };
  // au redimensionnement de la fenêtre
  window.onresize = function(){
    // on teste la largeur de la fenêtre
    var ww = window.innerWidth; // en pixels
    LeMenu.style.display = ( ww > 768 )? '':'none';
    CmdMenu.style.display = ( ww > 768 )? 'none':'';
  };
 
});

N.B. (....)? '':'none'; : on ne met pas (....)? 'block':'none'; car le menu est en display:flex; dans le CSS.

Voir le résultat : https://codepen.io/jreaux62/pen/rNVOyrP

**JPBruneau** · 12/02/2020, 14h35

Mille mercis l'Ami jreaux62 depuis que je te connais cela ne devrais pas m'étonner mais quel travail pour m'aider

Tu as raison, je sais malgré mes efforts que m'on code n'est pas au Top ! (80 ans en janvier ce n'est pas une excuse

)
En attendant tu résous 100% mon problème. reste que même si mon site ne justifies pas le Grid, C'est juste l'envie de tester le Grid Layout avec une goutte de Flex que je fais tout cela.
Je te remercierais jamais assez de ta patience pour me construire cette solution.

J'oses t'embêter encore un peut, j'ai posté ici, mais est-ce bien l'endroit pour toutes mes questions sur le Grid car malgré le livre et tout les liens sur le web, j'ai plein de questions à poser, merci !

A++
"Jean-Pierre" qui en d'autre temps était "Christèle Rubneau" et encore avant "FoxLeRenard" même modérateur et rédacteur ... puis avec l'age j'ai lâché prise.mais reste fidel.

Encore Merci à toi.

Invité · 12/02/2020, 14h49

Petit oubli...

Pour masquer le menu au chargement sur MOBILE (smartphone), ajouter :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
  // au chargement de la page
  window.onload = function(){
    // on teste la largeur de la fenêtre
    var ww = window.innerWidth; // en pixels
    LeMenu.style.display = ( ww > 768 )? '':'none';
    CmdMenu.style.display = ( ww > 768 )? 'none':'';
  };

**JPBruneau** · 13/02/2020, 17h47

Si ça t'intéresse j'ai reçu en MP la même version mais sans JS ce qui est recommandé pour la responsivity ;-)

Invité · 13/02/2020, 18h00

Oui, ça m’intéresse.

Poste le code.
Je suis curieux de voir.

**JPBruneau** · 14/02/2020, 19h01

Oui bien sur,
l'exemple de Raphael Goetter (patron d'Alsa-création et qui as écrit les deux livres (CSS3 Grid Layout et CCS3 FlexBox)
https://codepen.io/raphaelgoetter/pe...Jj?editors=110

Mais à mon avis un model de pédagogie et TRÈS ABORDABLE pour mon petit cerveau, un inconnu pour moi ...
Tu va te régaler avec ça, en plus il donne dans la vidéo présente dan sa page plein de truc sur Flex !
https://vincentdubroeucq.com/navigation-mobile-sans-js/

Petit nota: Raphael m'a dit que lui pourtant mordu de JS s'interdit les actions sur CSS par Javascript, car ça prime définitivement sur CSS et ça met le bazard sur les MediaQuery !

Invité · 14/02/2020, 19h07

OK, vu.
Mais le principe de fonctionnement n'est pas le même.

**JPBruneau** · 14/02/2020, 21h35

Ah si je l'ais remplacé sur mon site,(pas encore en ligne) donc ça remplace 100% mon problème

**JPBruneau** · 24/02/2020, 11h12

Envoyé par jreaux62

OK, vu.

Excuses moi j'ai refais le mini appel de menu en 100% CSS tu connais mais au cas ou, si ça t'intéresse, c'est la !
https://codepen.io/jplyne/pen/mdJPKyV
A++ et très bonne semaine à toi.

Menu capricieux en responsivité

CSS

Discussions similaires

Partager

Partager