Réaliser un menu responsive

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

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, 14h52

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, 16h37

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, 16h45

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, 17h15

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, 17h59

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.

Réaliser un menu responsive

Responsive design en CSS

Vue hybride

Discussions similaires

Partager

Partager