Menu horizontal sur toute la largeur disponible

**userparis** · 18/12/2013, 20h54

Bonjour, je cherche depuis un moment comment faire un menu horizontale qui :

- prends toute la largeur disponible, le premier élément étant tout à gauche et le dernier élément tout a droite.
- qui s'adapte au redimensionnement de la fenêtre et à la résolution des tablettes et pc. Plus la résolution baisse plus l'espace entre les éléments se réduit dans la mesure du possible jusqu'à ce qu'ils basculent les uns en dessous des autres.
Edit : - les espaces entre chaque éléments du menu sont identiques

j'ai trouvé sur le forum un topic avec une solution qui s'en approche mais qui n'est selon moi pas satisfaisante :

http://www.developpez.net/forums/d12...r-d-conteneur/

puis le code :

http://codepen.io/gc-nomade/pen/nrbDl

HTML :

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
47
48
<!DOCTYPE html>
<html>
    <head>
		<meta charset="utf-8" />
		<!-- Feuille de sylte de la page HTML -->
        <link media="screen" rel="stylesheet" href="menulargeur.css" />
    </head> 
    <body> 
		<h1>Justify-content</h1>
		<h2>display:flex<br/> (if boxes to align)</h2>
		<nav class="flex">
			<ul>
				<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
				<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
				<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
				<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
				<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
			</ul>
		</nav>
 
		<h2>text-align:justify & pseudo <br/>(for both text and inline-boxes)</h2>
		<nav class="txtalg-psdo">
			<ul>
				<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
				<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
				<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
				<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
				<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
				<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">dapibust</a></li>
				<li><a href="#nowhere" title="Pellentesque fermentum dolor">Fermentum</a></li>
			</ul>
		</nav>
 
		<h2>text-align:justify old method<br/> (for both text and inline-boxes)</h2>
		<nav class="txt-oldish">
			<ul>
				<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
				<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
				<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
				<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
				<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">dapibust</a></li>
				<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
			<li class="extraline"><!-- for old nav as IE5.5-7 --></li>
			</ul>
		  <b></b>
		</nav>
    </body> 
</html>

CSS :

Code :

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
66
67
68
69
70
/* young browsers */
.flex ul{
  display:flex;
  justify-content: space-between;
}
/* not so old browsers */
.txtalg-psdo ul {
  text-align:justify;
}
.txtalg-psdo ul:after {
  content:'';
  display:inline-block;
  width:100%;
  vertical-align:top;
}
/* really old */
 
.txt-oldish ul {
  text-align:justify;
}
.txt-oldish ul li {/* old IE*/
  *display:inline;
  zoom:1;
}
.txt-oldish .extraline {
  width:100%;
  vertical-align:top;
  font-size:0;
}
 
/* CSS 101  */
nav {
  /* nothing there if old nav included */
  border:solid ;
}
 
ul {
  background:tomato;
  padding:0;
  font-size:0;
}
 
li {
  display:inline-block;
  background:pink;
  padding:0.25em 0.5em;
  font-size:1.5em;
  font-size:2vw;
}
 
 li:nth-child(odd) {
   background:gray;
 }
a {
  text-decoration:none;
}
body {
color:orange;
  background:purple;
}
 
h2 {color:white;
  font-size:1.2em;
}
 
h2:first-line {
color:orange;
  font-size:1.3em;
  text-decoration:underline;
}

En ce qui concerne ce code, testé en l'état OK pour Firefox, ne fonctionne pas sur IE10>> En testant j'ai commenté les deux lignes suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
/*font-size:0;*/
/*font-size:2vw;*/

et ça fonctionne pour IE10. Par contre, le design se dégrade et un espace apparaît en dessous du menu (qui était inexistant sur Firefox avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

font-size:0;

dans le ul)

Avez-vous une solution pour ne pas avoir l'espace en dessous le menu en enlevant la ligne de code ci-dessus ?

Sinon d'une manière plus général, il y a peu être d'autres solutions pour obtenir un menu de ce type.

Merci.

Invité · 18/12/2013, 21h07

BOnjour,
si le nombre de menu (donc de <li>) est connu, il suffit de définir une largeur de <li> en %.

Ex :

5 menus -> li { width:20%; } /* (100% / 5) = 20% */
6 menus -> li { width:16.66%; } /* (100% / 6) = 16.666% arrondi à 16.66% */
...

**userparis** · 19/12/2013, 11h09

Bonjour et merci,

effectivement cela peut être une solution, le nombre d'éléments est connu, cependant la largeur de chacun varie. Il y a notamment un élément qui est deux fois plus large que d'autres.

Je pourrais allouer un espace suffisant pour ce dernier et me baser sur cette largeur pour les autres éléments mais il serait difficile par la suite d'obtenir des espaces identiques entre chaque éléments.

Edit : Désolé, j'aurai dû préciser dans mon premier message que je souhaitai également des espaces identiques entre chaque éléments du menu.

Merci.

**raydenprod** · 26/12/2013, 12h20

Bonjour,

si j'ai bien compris c'est tout bête...

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>
		<title>Raydenprod - Webdesigner / Front-end Developer </title>
	<style>
                *{
                        margin:0;
                        padding:0;
                }
                ul{
                  background: green;
                  list-style-type:none;
                  width:100%;
                }
                li {
                        background: red;
                        display: inline;
                        margin: 2%;
                }
</style>	
	</head>
	<body>
	<ul>
	  <li>blabla</li>
	  <li>blablablabla</li>
	  <li>blablblablablablaa</li>
	  <li>blablblablablablablblablablablablablaablablblablablablablablaablablablaa</li>
	</ul>
	</body>
</html>