Menu horizontal avec l'item actif souligné et un séparateur

**flamant** · 20/01/2018, 22h50

Bonjour,
j'essaye de mettre en place un menu avec l'élément actif souligné et un séparateur entre chaque item de menu d'une certaine manière.

Voici mon menu

Code html :

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

1
2
3
4
5
6
7
8
                <nav class="{{site.menuClass}}">
                    <ul class="menu">
                        <li><a href="/">{% t home %}</a></li>
                        <li><a href="/pages/whoami.html">{% t whoIAm %}</a></li>
                        <li><a href="/pages/yeartariffs.html">{% t tariffs2018 %}</a></li>
                        <li><a href="/pages/coveredMunicipalities.html">{% t coveredMunicipalities %}</a></li>
                    </ul>
                </nav>

et voici mes classes scss

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
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
71
72
73
74
75
76
77
78
#{$navigationClass} li a.active::before {
    left: 0;
    width: 100%;
    height: 2px;    
}
 
#{$navigationClass} li a::before {
    bottom: -10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    content: '';
    position: absolute;
    cursor: default;
    left: 50%;
    width: 0;
    height: 0;
    background: $baseColor;
}
 
#{$navigationClass} li a {
    border-bottom: none;
}
 
#{$navigationClass} li a:hover {
    color: $baseColor;
}
 
#{$navigationClass} li a {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    font-family: $main-menu-font-family;
    letter-spacing: 1px;
    color: $default-font-color;
}
 
#{$navigationClass} li a {
    position: relative;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
}
 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
 
}
 
li {
    float: left;
}
 
li > a {
    display: block;
    background-color: #dddddd;
 
}
 
li > a::after {
    content: "-";
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}
 
li:last-child > a::after {
    content: "";
    margin-left: 0;
    margin-right: 0;
}
 
nav {
    text-align: center;
}

Le problème est que le soulignement de l'élément actif s'étend jusqu'à la fin de l'élément a::after et ne s'arrète pas à la fin du texte (sur la figure ACCUEIL) compris dans le tag a comme le montre la figure suivante

Nom : Capture d’écran 2018-01-20 à 22.42.25.png
Affichages : 1664
Taille : 11,5 Ko

Merci d'avance pour vos réponses

**headmax** · 21/01/2018, 17h11

Salut j'ai pas tout repris ton css

je suis pas webdesigner, donc un essai ici (NB; il y du JS) jquery et une lib qui étends scroll .
https://codepen.io/headmax/pen/ypZGeW?editors=0010

**JefReb** · 21/01/2018, 19h07

Désolé, moi aussi je ne comprends pas.
Nous ne sommes pas tous des développeurs pro et aimerions bien aider à condition d'avoir le maximum d'information.
C'est important pour chercher.
Ainsi, encore désolé je ne sais pas traiter du code CSS comme

Code css :

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

#{$navigationClass} ....

Nouveauté?
Si oui ou non, une petite adresse tuto pour que je comprenne .

**flamant** · 21/01/2018, 20h01

Bonjour headmax et JefReb,

désolé headmax, je n'utilise pas jquery

Pour JefReb, je suis désolé, je travaille avec jekyll et scss. Oublie ce que j'avais mis et voici le code à analyser

code html

Code :

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

1
2
3
4
5
6
7
8
9
 
                <nav class="navMenu">
                    <ul class="menu">
                        <li><a href="/">{% t home %}</a></li>
                        <li><a href="/pages/whoami.html">{% t whoIAm %}</a></li>
                        <li><a href="/pages/yeartariffs.html">{% t tariffs2018 %}</a></li>
                        <li><a href="/pages/coveredMunicipalities.html">{% t coveredMunicipalities %}</a></li>
                    </ul>
                </nav>

et le 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
71
72
73
74
75
 
.navMenu li a.active::before {
    left: 0;
    width: 100%;
    height: 2px;    
}
 
.navMenu li a::before {
    bottom: -10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    content: '';
    position: absolute;
    cursor: default;
    left: 50%;
    width: 0;
    height: 0;
    background: blue;
}
 
 
.navMenu li a:hover {
    color: blue;
}
 
.navMenu li a {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    font-family: $main-menu-font-family;
    letter-spacing: 1px;
    color: $default-font-color;
    border-bottom: none;
    position: relative;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
}
 
 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
 
}
 
li {
    float: left;
}
 
li > a {
    display: block;
    background-color: #dddddd;
 
}
 
li > a::after {
    content: "-";
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}
 
li:last-child > a::after {
    content: "";
    margin-left: 0;
    margin-right: 0;
}
 
nav {
    text-align: center;
}

**NoSmoking** · 22/01/2018, 15h25

Bonjour,
il te faut « diviser pour mieux régner », le tiret n'a rien à faire avec tes éléments <a>, alors il te faut les déplacer sur tes éléments <li>.

• Pour n'affecter qu'à partir du 2^éme éléments il y a le sélecteur +, ce qui donne

Code :

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

1
2
3
4
5
6
7
8
.menu li +li::before {
  content: "-";
  display: block;
  position: absolute;
  left: 0;
  width: 1em;
  text-align: center;
}

... il te faut donc laisser de la place entre tes éléments <li>, on pourrait donc mettre le CSS suivant

Code :

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

1
2
3
4
5
6
7
.menu li {
  display: table-cell;      /* moins « sale » que float: left */
  position: relative;       /* pour servir de référent */
}
.menu li +li {
  padding-left: 1em;        /* espace pour placer le ::before */
}

• Maintenant tu es serein pour aborder tes éléments [C)html]<a>[/C], ce qui pourrait donner quelque chose comme

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.menu a {
  display: block;
  position: relative;       /* pour servir de référent */
  padding: 0 .5em;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Verdana;
  font-size: .9em;
  font-style: normal;
  font-weight: 700;
  color: #000;
}

• Il reste à traiter le soulignement et pour ce faire on va utiliser un pseudo-élement before que l'on pourrait définir comme suit

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.menu a::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -.5em;            /* décalage vers le bas à ajuster */
  right: 50%;
  left: 50%;
  height: 2px;
  background: #069;
  transition: all .5s;      /* pour un petit effet */
}

... et la règle sur au survol ou autre

Code :

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

1
2
3
4
5
.menu a.active::before,
.menu a:hover::before {
  right: .5em;              /* tient compte du padding-right */
  left: .5em;               /* tient compte du padding-left */
}

Le résultat en fichier

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[CSS] Menu souligné</title>
<meta name="Author" content="NoSmoking">
<style>
html {
  font: 1em/1.25 Verdana;
}
body {
  max-width: 60em;
  margin:  1em auto;
}
h1, h2, h3 {
  color: #069;
}
.navMenu {
  text-align: center;
}
.menu {
  display: table;  
  margin: 0 auto;
  padding: 0;
  line-height: 1.5em;
  list-style-type: none;
  background: #E0E0E0;
}
.menu li {
  display: table-cell;      /* moins « sale » que float: left */
  position: relative;       /* pour servir de référent */
}
.menu li +li {
  padding-left: 1em;        /* espace pour placer le ::before */
}
.menu li +li::before {
  content: "-";
  display: block;
  position: absolute;
  left: 0;
  width: 1em;
  text-align: center;
}
.menu a {
  display: block;
  position: relative;       /* pour servir de référent */
  padding: 0 .5em;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Verdana;
  font-size: .9em;
  font-style: normal;
  font-weight: 700;
  color: #000;
}
/*--------------------------*/
/* le trait de soulignement */
/*--------------------------*/
.menu a::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -.5em;            /* décalage vers le bas */
  right: 50%;
  left: 50%;
  height: 2px;
  background: #069;
  transition: all .5s;      /* pour un petit effet */
}
.menu a.active::before,
.menu a:hover::before {
  right: .5em;              /* tient compte du padding-right */
  left: .5em;               /* tient compte du padding-left */
}
</style>
</head>
<body>
  <header>
    <nav class="navMenu">
      <ul class="menu">
        <li><a href="#" class="active">Accueil</a></li>
        <li><a href="#">Qui suis-je</a></li>
        <li><a href="#">Tarifs 2018</a></li>
        <li><a href="#">Les communes desservies</a></li>
      </ul>
    </nav>
  </header>  
</body>
</html>

**flamant** · 27/01/2018, 18h42

Merci NoSmoking ça marche.

Quelques questions par rapport à ta solution (je débute)

Code :

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

1
2
3
4
5
6
7
8
9
 
.menu li +li::before {
  content: "-";
  display: block;
  position: absolute;
  left: 0;
  width: 1em;
  text-align: center;
}

::before est un pseudo élément. Quand tu mets position: absolute et left: 0, l'ancètre du pseudo élément est li ou ul ?

et quand tu met display : block à plusieurs endroits sur ton code, pourquoi ? Je me pose la question car d'après la doc : block: Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width.
Merci d'avance. Après cela je passerai en Résolu.

**NoSmoking** · 29/01/2018, 15h32

Pour être honnête il y a quelques maladresse (

) dans mon code.

Les pseudo-éléments, comme ::before, sont par défaut en display: inline, sauf que le fait de les mettre en position:absolute les fait basculer en display: block, conclusion le display:block sert strictement à rien.

Code :

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

1
2
3
4
5
6
7
.menu li +li::before {
  content: "-";
  position: absolute;
  left: 0;
  width: 1em;
  text-align: center;
}

Quand tu mets position: absolute et left: 0, l'ancètre du pseudo élément est li ou ul ?

Le parent direct est bien le <li>, c'est comme cela que s'utilise ce sélecteur.

**flamant** · 29/01/2018, 16h30

Merci NoSmoking.

Menu horizontal avec l'item actif souligné et un séparateur

CSS

Discussions similaires

Partager

Partager