Comment faire un menu avec le meme espace entre les éléments

**pierrot10** · 07/09/2016, 20h19

Bonjour à tous,

Ma question peut sembler bête et peut-etre qu'elle l'est, mais je ne sais pas comment contrer les alignements dans un li.

Je m'explique.
J'ai fais ce site http://www.yoga-arbre.ch/ dont le menu est en ul et li

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
 
<nav>
<ul class="menu_general">
<li class="first level1">
<a title="Accueil" href="http://www.yoga-arbre.ch/">Bienvenue</a>
</li>
<li class="level1">
<li class="level1">
<li class="last level1">
</ul>
</nav>

Dans mon CSS, j'ai fais ainsi pour que les li soit alignés

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
 
nav ul{
	padding:0px;
	margin:0px;
	border-top:2px dotted #8A343D;
	border-bottom:2px dotted #8A343D;
	padding-top:4px;
	padding-bottom:4px;
	overflow:hidden;
}
nav li{
	list-style-type:none;
	float:left;
	text-align:center;
white-space: nowrap;
        width:25%; /* J'ai supprimé ceci plus tard */
}

J'ai aussi mis text-align:center pour que les textes soit centrés.

Mais voilà, il faut que le premier soit aligné sur le bord de gauche et le dernier sur le bord de droite. Alors j'ai ajouté ceci:

Code :

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

1
2
3
4
5
6
7
 
nav li.first{
	text-align:left;
}
nav li.last{
	text-align:right;
}

Le problème qui se pose maintenant, l'espace entre le 1 et le 2 n'est plus egal au 2 et 3. Idem pour le 3 et le 4.

Si je plaque le premier élément, l'espace va s'grandir entre le 1 et le 2. Il faudrait que le 2 s'adapte

Comment faire pour les 4 éléments (texte) du menu ont les mêmes espaces en gardant l'usage des ul et li?

Pour le moment, j'ai dédouillé ceci, mais je n'ai pas cette maniere de faire et surtout ca ne joue plus sur les écrans des smartphone

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
nav li:nth-child(1) {
	width:20%;
}
nav li:nth-child(2) {
	width:25%;
}
nav li:nth-child(3) {
	width:35%;
}
nav li:nth-child(4) {
	width:20%;
}

Merci pour vos lumière

**pierrot10** · 07/09/2016, 20h30

Il faut evidement que les éléments du menu soit sur une lignes et que sa s'adapte quand on redimensionne le navigateur à la main ou quand on passe sur une tablette ou un smartphone.

**pierrot10** · 08/09/2016, 00h16

J'ai travaillé mon menu et il se met en responsive pour les smartphoe.
Mais ma problématique reste valable pour les écrans. Les menus n'ont pas d'espaces egaux

Milles mercis

Invité · 08/09/2016, 10h41

Bonjour,

voici une solution, qui nécessite jQuery : http://codepen.io/jreaux62/pen/KgpRKd

Code :

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

1
2
3
4
5
6
7
8
<nav>
  <ul id="myTopnav" class="topnav">
    <li class="first level1"><a href="http://www.yoga-arbre.ch/" title="Accueil">Bienvenue</a></li>
    <li class="level1"><a href="yoga.html" title="Yoga">Yoga</a></li>
    <li class="level1"><a href="horaires-et-tarifs.html" title="Horaires & tarifs">Horaires & tarifs</a></li>
    <li class="last level1"><a href="parcours.html" title="Parcours">Parcours</a></li>
  </ul>
</nav>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#myTopnav {
	padding:4px 0;
	margin:0;
	border-top:2px dotted #8A343D;
	border-bottom:2px dotted #8A343D;
  overflow:hidden;
}
#myTopnav li{
	list-style-type:none;
	float:left;
	padding:0;
	margin:0;
}

Code jQuery :

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
  function ajustMenu() {
    $('#myTopnav li').css({
      'margin-right': '0px'
    });
    var Wdiv = $('#myTopnav').width(); // (nombre de pixels du conteneur)
    var nbreSpace = $('#myTopnav li').length - 1; // nombre d espaces entre les li
    var Wtext = 0;
    $('#myTopnav li').each(function() {
      Wtext += $(this).width(); // (nombre de pixels du texte)
    });
    var txtspace = Math.floor((Wdiv - Wtext) / nbreSpace);
    $('#myTopnav li:not(:last-child)').css({
      'margin-right': txtspace + 'px'
    }); // on ajuste (sauf le dernier li)
  }
 
  $(window).on('load resize', function() {
    ajustMenu(); // au chargement de la page + au redimensionnement de la fenêtre
  });

**pierrot10** · 08/09/2016, 10h51

C'est très intéressant. Je vais regardé ca, merci beaucoup!

Invité · 08/09/2016, 13h08

Remarques, après étude de ton code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<nav>
  <ul id="myTopnav" class="topnav">
    <li class="first level1"><a href="http://www.yoga-arbre.ch/" title="Accueil">Bienvenue</a></li>
    <li class="level1"><a href="yoga.html" title="Yoga">Yoga</a></li>
    <li class="level1"><a href="horaires-et-tarifs.html" title="Horaires & tarifs">Horaires & tarifs</a></li>
    <li class="last level1"><a href="parcours.html" title="Parcours">Parcours</a></li>
 
    <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">☰</a>
    </li>
  </ul>
</nav>

1/ Tu as un dernier <li class="icon">, masqué sur desktop, mais visible sur smartphone.
2/ conséquence : le script ne dois pas être appliqué sur smartphone.

Il faudra donc adapter le code à ton cas particulier : http://codepen.io/jreaux62/pen/pEJKVO

Code jQuery :

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
  function ajustMenu() {
 
    $('#myTopnav li').css({
      'margin-right': '0px'
    });
    // -------------------
    //	NAVIGATION NOT PHONE
    if ($(window).width() >= 641) 
    {
      var Wdiv = $('#myTopnav').width(); // (nombre de pixels du conteneur)
      var nbreSpace = $('#myTopnav li:not(.icon)').length - 1; // nombre d espaces entre les li
      var Wtext = 0;
      $('#myTopnav li:not(.icon)').each(function() {
        Wtext += $(this).width(); // (nombre de pixels du texte)
      });
      var txtspace = Math.floor((Wdiv - Wtext) / nbreSpace);
      $('#myTopnav li:not(.last):not(.icon)').css({
        'margin-right': txtspace + 'px'
      }); // on ajuste (sauf le dernier li)
    }
  }
 
  $(window).on('load resize', function() {
    ajustMenu(); // au chargement de la page + au redimensionnement de la fenêtre
  });

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
26
27
28
29
#myTopnav {
	padding:4px 0;
	margin:0;
	border-top:2px dotted #8A343D;
	border-bottom:2px dotted #8A343D;
  overflow:hidden;
}
#myTopnav li{
	list-style-type:none;
	padding:0;
	margin:0;
}
/* DESKTOP */
@media screen and (min-width:641px)
{
  #myTopnav li.icon {
    display:none;
  } 
  #myTopnav {
    display:flex;
  }
}
/* PHONE */
@media screen and (max-width:640px)
{
  #myTopnav li:not(.icon) {
    display:none; /* on masque */
  } 
}

**NoSmoking** · 11/09/2016, 19h28

Bonjour,
c'est typiquement une application pour flex-box et sa propriété/valeur justify-content: space-between.

Code :

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

1
2
3
4
5
nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

et un passage en flex-direction:column avec les Media Queries.

Invité · 12/09/2016, 14h27

Bien vu, NoSmoking,

Il serait temps que j'étudie les flexbox de (beaucoup) plus près.

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#myTopnav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
	margin:0;
	padding:0;
}
#myTopnav li{
	list-style-type:none;
	margin:0;
}

N.B. J'ai sorti mon code JS du placard.
Il était inspiré par d'autres codes que j'avais fait concernant l'espacement de mots / lettres :

**NoSmoking** · 12/09/2016, 19h28

Cela vaut effectivement la peine de se pencher sur cette mise en forme que tout le monde attendait, pas trop de complication mais pas mal de finesses quand même.

La prise en compte est « presque » totale mis à part les bugs répertoriés : Flexbugs.

Restera quand même à l'utiliser à bon escient.

**pierrot10** · 12/09/2016, 22h55

Super, merci beaucoup!!!

Comment faire un menu avec le meme espace entre les éléments

CSS

Discussions similaires

Partager

Partager