Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Menu capricieux en responsivité


Sujet :

CSS

  1. #1
    Membre régulier
    Menu capricieux en responsivité
    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 ??

  2. #2
    Invité
    Invité(e)
    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">&#9776;</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.


  3. #3
    Membre régulier
    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.

  4. #4
    Invité
    Invité(e)
    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':'';
      };



  5. #5
    Membre régulier
    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 ;-)

  6. #6
    Invité
    Invité(e)
    Oui, ça m’intéresse.

    Poste le code.
    Je suis curieux de voir.

  7. #7
    Membre régulier
    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/navigat...obile-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 !

  8. #8
    Invité
    Invité(e)
    OK, vu.
    Mais le principe de fonctionnement n'est pas le même.

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

  10. #10
    Membre régulier
    Citation Envoyé par jreaux62 Voir le message
    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.

###raw>template_hook.ano_emploi###