Réaliser un menu responsive

**JPBruneau** · 22/11/2019, 14h42

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>

**NoSmoking** · 22/11/2019, 15h52

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.

**JPBruneau** · 22/11/2019, 17h37

Envoyé par NoSmoking

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

Invité · 22/11/2019, 17h45

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;
}

A Complete Guide to Flexbox

**JPBruneau** · 22/11/2019, 18h15

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.

**NoSmoking** · 22/11/2019, 18h59

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.

**JPBruneau** · 22/11/2019, 19h23

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>

Invité · 23/11/2019, 11h25

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".

**JPBruneau** · 24/11/2019, 01h00

Envoyé par jreaux62

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éaliser un menu responsive

Responsive design en CSS

Discussions similaires

Partager

Partager