Réaliser un menu responsive

Version imprimable

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:

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>

Bonjour,
ton menu peut se résumer à

Code:

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:

1
2
3
4
5
6
7
8
nav {
  display: flex;
  width : 90%;
  margin: auto;
}
nav a {
  margin: auto;
}

à ajuster suivant besoin.

Citation:

Envoyé par NoSmoking

Bonjour,

à ajuster suivant besoin.

Whaoo merci l'Ami, ;)
Juste avant de fermer le sujet, tu mettrais quoi dans le responsive ?
Code:

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

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:

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:

1 2 3 4 5 nav { display:flex; justify-content:center; flex-wrap:wrap; }
A Complete Guide to Flexbox

22/11/2019, 17h15
JPBruneau

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.
22/11/2019, 17h59
NoSmoking
En restant sur du « flex » et en utilisant les Media-Queries, il suffit de :
Code:

1 2 3 4 5 6 @media (max-width:640px) { nav { flex-direction: column; width : 100%; } }
pour faire le job.

C'est toujours tout simple avec vous deux :P ,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:

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>

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:

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:

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

24/11/2019, 00h00
JPBruneau
Citation:

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 !