IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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 :

Réaliser un menu responsive


Sujet :

Responsive design en CSS

  1. #1
    Membre très actif
    Avatar de JPBruneau
    Homme Profil pro
    retraité
    Inscrit en
    Août 2019
    Messages
    251
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : retraité
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2019
    Messages : 251
    Par défaut Réaliser un menu responsive
    Bonjour,
    Je souhaites créer un menu simple mais responsive 100%CSS et si possible avec FLEX.
    Pourriez vous m'indiquer un exemple, car les pages de Topos vont trop loin, et souvent ne donnent pas un exemple simple "clé en main"
    Je sais que je n'utilises que des méthodes périmées, mais cela vous donnera une idée de mon menu.
    Un autre problème que j'ais, est que sur smartphone, le menu passe bien ligne par ligne, mais en coupant des libellé ???
    Bref je suis certain qu'un mordu du <LI + FLEX va me remettre dans le bon chemin..
    Merci d'avance
    Jean-Pierre
    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
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
     
    <!DOCTYPE html>
    <html lang='fr'>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <style type='text/css'>
    html, body{height:100%;}
    body { background-color:#ffffff;font-family :Georgia, "Times New Roman", Times, serif; color :#000000; font-size :18px;} 
    * { box-sizing:border-box; }
    div.centre2blanc {height : auto;width : 90%;max-width : 1200px;margin : auto;text-align : center;}
    a.lemenu {  color:#3F4057;  text-decoration:none;  font-size:24px;}
    a.lemenu:link {}
    a.lemenu:hover {color:#FF2222;}
    a.lemenuA {  color:#aa2222;  text-decoration:none;  font-size:24px;}
    </style>
    </head><body>
    <div class='centre2blanc'>
    <br /><img src='imagevide.png' alt='Fox Infographie' class='levide' /><br />   <!-- un vide de 920*96px  -->
    <a href='apropos.php' class='lemenu'  >A Propos</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='news.php' class='lemenu' >Les News</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' class='lemenuA' >Le-Blog</a>   <!-- le menu en cours  -->
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='wphoto.php' class='lemenu' >Galeries</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='lien.php' class='lemenu' > Coup-de-Coeur </a>
    &nbsp;&nbsp;<br /><br clear=both>
    </div>
    </body></html>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 224
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 224
    Par défaut
    Bonjour,
    ton menu peut se résumer à
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <header>
      <nav>
        <a href="apropos.php" class="lemenu">A Propos</a>
        <a href="news.php" class="lemenu">Les News</a>
        <a href="#" class="lemenuA">Le-Blog</a>
        <a href="wphoto.php" class="lemenu">Galeries</a>
        <a href="lien.php" class="lemenu"> Coup-de-Coeur </a>
      </nav>
    <header>
    avec ce simple CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    nav {
      display: flex;
      width : 90%;
      margin: auto;
    }
    nav a {
      margin: auto;
    }
    à ajuster suivant besoin.

  3. #3
    Membre très actif
    Avatar de JPBruneau
    Homme Profil pro
    retraité
    Inscrit en
    Août 2019
    Messages
    251
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : retraité
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2019
    Messages : 251
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Bonjour,

    à ajuster suivant besoin.
    Whaoo merci l'Ami,
    Juste avant de fermer le sujet, tu mettrais quoi dans le responsive ?
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    /* __________________________media 640_____________________ */
    @media (max-width:640px) {
    body, element1, element2 {width : auto;margin : 0;padding : 0;}
     
    img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width : 100%;}
    }
    du reste si un truc te choque dis le moi, car le début je l'ai récupéré ....
    Merci encore

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    si je me réfère au style du 1er code, et au HTML de NoSmoking, il n'y a besoin de rien :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    nav {
      text-align:center;
    }
    nav a {
      display:inline-block;
      color:#3F4057;
      text-decoration:none;
      font-size:24px;
      padding:5px 20px;
    }
    nav a:hover { color:#FF2222; }
    nav a.lemenuA { color:#aa2222; }
    C'est "naturellement" responsive.
    (à la rigueur, on peut changer le font-size et padding...)

    Une variante, avec flex :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    nav {
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
    }


  5. #5
    Membre très actif
    Avatar de JPBruneau
    Homme Profil pro
    retraité
    Inscrit en
    Août 2019
    Messages
    251
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : retraité
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2019
    Messages : 251
    Par défaut
    Merci à vous deux,

    En fait oui la première version était curieusement responsive ,elle coupait chaque libellé l'un a coté de l'autre comme sur écran, mais chaque texte sur deux lignes !!
    Ta solution au contraire mets bien sur deux lignes les liens ==> 1-2-3 et 4-5 en dessous SUPER juste il me reste à écarter un peut les deux lignes je vais chercher ??

    Encore mille mercis.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 224
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 224
    Par défaut
    En restant sur du « flex » et en utilisant les Media-Queries, il suffit de :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    @media (max-width:640px) {
      nav {
        flex-direction: column;
        width : 100%;
      }
    }
    pour faire le job.

  7. #7
    Membre très actif
    Avatar de JPBruneau
    Homme Profil pro
    retraité
    Inscrit en
    Août 2019
    Messages
    251
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : retraité
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2019
    Messages : 251
    Par défaut
    C'est toujours tout simple avec vous deux ,mais tu vois je ne regrettes pas d'avoir demandé ici, car ces nouveaux concepts (pour moi) malgré le livre FLEX acheté, les explications sont moins claires (pas encore assez riches via google) !
    Encore merci
    Ma version finale !!!

    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
    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
     
    <!DOCTYPE html>
    <html lang='fr'>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if IE]> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <style type='text/css'>
    html, body{height:100%;}
    body { background-color:#ffffff;font-family :Georgia, "Times New Roman", Times, serif; color :#000000; font-size :18px;} 
    * { box-sizing:border-box; }
    div.centre2blanc {height : auto;width : 90%;max-width : 1200px;margin : auto;text-align : center;}
    a.lemenuA {  color:#aa2222;  text-decoration:none;  font-size:24px;}
    a.lemenu {  color:#3F4057;  text-decoration:none;  font-size:24px;}
    a.lemenu:link {}
    a.lemenu:hover {color:#FF2222;}
     
    a.lemenu { padding: 0 5px;}
    a.lemenuA { padding: 0 5px;}
     
    nav {  display:flex;  justify-content:center;  flex-wrap:wrap;}
     
    nav a {  margin: auto; }
    /* __________________________media 640_____________________ */
    @media (max-width:640px) {
    body, element1, element2 {width : auto;margin : 0;padding : 0;}
     
    img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width : 100%;}
    nav {    flex-direction: column;    width : 100%;  }
    }
    </style>
    </head><body>
    <div class="centre2blanc">
    <header>
      <nav>
        <a href="apropos.php" class="lemenu">A Propos</a>
        <a href="news.php" class="lemenu">Les News</a>
        <a href="#" class="lemenuA">Le-Blog</a>
        <a href="wphoto.php" class="lemenu">Galeries</a>
        <a href="lien.php" class="lemenu"> Coup-de-Coeur </a>
      </nav>
    <header>
    </div>
    </body></html>

  8. #8
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    pour parfaire ta formation (), voici quelques améliorations.

    1- Inutile de mettre une classe sur tout les <a> du menu : un id sur le <nav> suffit :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
      <nav id="lemenu">
        <a href="apropos.php">A Propos</a>
        <a href="news.php">Les News</a>
        <a href="#" class="lemenuA">Le-Blog</a>
        <a href="wphoto.php">Galeries</a>
        <a href="lien.php"> Coup-de-Coeur </a>
      </nav>

    2- il faut penser "MOBILE FIRST" :
    • c'est-à-dire qu'on écrit d'abord le code pour le MOBILE.
    • ensuite, on utilise les media-queries pour les largeurs supérieures (TABLET / DESKTOP)

    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
    * { box-sizing:border-box; }
    html, body{ width:100%; height:100%; min-height:100%; }
    body { background-color:#ffffff; font-family:Georgia, "Times New Roman", Times, serif; color:#000000; font-size:100%; } 
    body, element1, element2 {width:auto; margin:0; padding:0; }
    img, blockquote, pre, textarea, input, iframe, object, embed, video { max-width:100%; }
     
    div.centre2blanc {height:auto; width:90%; max-width:1200px; margin:auto; text-align:center; }
     
    /* MOBILE FIRST */
    /* MENU */
    nav#lemenu { text-align:center; }
    nav#lemenu a { display:block; margin: auto; padding:2px 5px; color:#3F4057; text-decoration:none; font-size:120%; }
    nav#lemenu a.lemenuA { color:#aa2222; }
    nav#lemenu a:link {}
    nav#lemenu a:hover {color:#FF2222; }
     
    /* TABLET / DESKTOP */
    @media (min-width:641px) {
      nav#lemenu { display:flex; justify-content:center; flex-wrap:wrap; }
      nav#lemenu a { font-size:140%; }
    }
    /* DESKTOP */
    @media (min-width:992px) {
      nav#lemenu a { font-size:160%; }
    }
    N.B. on peut écrire simplement "#lemenu", car un id est unique, mais "nav#lemenu" est plus "parlant".

  9. #9
    Membre très actif
    Avatar de JPBruneau
    Homme Profil pro
    retraité
    Inscrit en
    Août 2019
    Messages
    251
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : retraité
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2019
    Messages : 251
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Bonjour,
    pour parfaire ta formation (), voici quelques améliorations.
    1- Inutile de mettre une classe sur tout les <a> du menu : un id sur le <nav> suffit :

    Ah Ah tu n'as pas mesuré le pourquoi le menu est généré par un PHP include wmenu.php et juste avant il y avait $menu-actif=3 le blog
    qui sera marron (class ==> lemenuA ,voila pourquoi !

    2- il faut penser "MOBILE FIRST" : Ah ça je l'ignorait !! BON a savoir merci ,est-ce au point que le haut du CSS est pour le portable ?
    mais alors tu mets quoi comme @media ( ?? superieur à 900 ? tu m'intéresses !
    Ah oui OK ceci en dessous ! ça selon ta devise je ne le ferais pas demain
    • c'est-à-dire qu'on écrit d'abord le code pour le MOBILE.
    • ensuite, on utilise les media-queries pour les largeurs supérieures (TABLET / DESKTOP)


    N.B. on peut écrire simplement "#lemenu", car un id est unique, mais "nav#lemenu" est plus "parlant". Top l'info
    Merci pour tout !

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

Discussions similaires

  1. Réalisation d’un menu
    Par jstika dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 09/02/2009, 12h08
  2. Réaliser un menu au survol avec CSS
    Par thibaud74 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 07/03/2008, 10h25
  3. comment réaliser ce menu?
    Par sybil dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 26/10/2007, 12h07
  4. Réaliser un menu
    Par IDE dans le forum C
    Réponses: 28
    Dernier message: 03/04/2007, 17h34
  5. Réponses: 6
    Dernier message: 02/10/2006, 23h40

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