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 Avatar de JPongivart
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    août 2019
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : août 2019
    Messages : 84
    Points : 76
    Points
    76
    Par défaut 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
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 501
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 501
    Points : 33 977
    Points
    33 977
    Par défaut
    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> :
    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.

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre régulier Avatar de JPongivart
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    août 2019
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : août 2019
    Messages : 84
    Points : 76
    Points
    76
    Par défaut
    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
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 501
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 501
    Points : 33 977
    Points
    33 977
    Par défaut
    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':'';
      };

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre régulier Avatar de JPongivart
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    août 2019
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : août 2019
    Messages : 84
    Points : 76
    Points
    76
    Par défaut
    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
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 501
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 501
    Points : 33 977
    Points
    33 977
    Par défaut
    Oui, ça m’intéresse.

    Poste le code.
    Je suis curieux de voir.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Membre régulier Avatar de JPongivart
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    août 2019
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : août 2019
    Messages : 84
    Points : 76
    Points
    76
    Par défaut
    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 !

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 501
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 501
    Points : 33 977
    Points
    33 977
    Par défaut
    OK, vu.
    Mais le principe de fonctionnement n'est pas le même.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #9
    Membre régulier Avatar de JPongivart
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    août 2019
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : août 2019
    Messages : 84
    Points : 76
    Points
    76
    Par défaut
    Ah si je l'ais remplacé sur mon site,(pas encore en ligne) donc ça remplace 100% mon problème

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Menu contextuel grid [ExtJS 3.x]
    Par abraxis dans le forum Ext JS / Sencha
    Réponses: 2
    Dernier message: 02/06/2012, 00h08
  2. Passage paramètres Grid et Menu
    Par sbernard dans le forum Ext JS / Sencha
    Réponses: 3
    Dernier message: 23/06/2010, 11h56
  3. [Dojo] Affichage du menu ça marche pas sur une grid
    Par hasnaa1988 dans le forum Bibliothèques & Frameworks
    Réponses: 6
    Dernier message: 12/03/2010, 12h43
  4. [Dojo] Creer un menu sur click droite sur les ligne d'une grid
    Par devkaty dans le forum Bibliothèques & Frameworks
    Réponses: 8
    Dernier message: 26/01/2010, 16h47
  5. [Dojo] Grid: sauvegarde de l'état des case à cocher du menu "PlaceHolder"
    Par laminfodev dans le forum Bibliothèques & Frameworks
    Réponses: 1
    Dernier message: 27/11/2009, 02h15

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo