Effet sur menu multi-niveaux

Version imprimable

Bonjour aux passionnés.
Comme je suis toujours curieux d'apprendre et de comprendre, je décortique les nombreux forums qui sont des sources d'acquisition importantes.
En répondant à un participant sur un menu, j'ai proposé le code de NoSmoking pour y répondre.
Mais j'ai voulu aller plus loin et comprendre d'avantage le code. J'ai expurgé tout le "cosmétique" pour ne garder que l'essentiel.
Mais je bute sur le caractère mis par :before qui est trop prêt du texte et le 2ème sous-menu est lui aussi trop décalé vers la gauche.

Un petit code pen:
http://codepen.io/JefReb/pen/egyOwZ
Et le code css et html.
Si il y en a un, qui a du temps, pour se pencher sur mon erreur, je le remercie d'avance.

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
body {
	width: 500px;
	margin: 0 auto;
}
nav {
	width: 200px;
	margin: 0;
	padding: 0;
	background: #CCC;
	border: 1px solid #333;
	line-height: 2em;
	height: 2em;
	cursor: pointer;
}
nav ul, nav li {
	position: relative; 
	margin: 0;
	padding: 0;
	list-style: none;
}
nav li {
	line-height: 2em;
	color: #000;
}
nav ul > li {
	float: left;
	display: inline-block;
	line-height: 2em;      
	color: #000;           
	padding: 0 1em;
}
nav ul > li a {
	display: block;
	color: inherit;        
	text-decoration: none;
}
nav li > ul li:before {
	content: "\0025BA";
	float: right;
	color: #333;
	z-index: -1;
}
nav li:hover {
	background: #333;
	color: #fff;
}
nav li ul {
	position: absolute;
	left: 0;
	top: 100%;
	height: 0;
	width: 0;
	opacity: 0;
	background: #fff;
	border: 1px solid #333;
}
nav li li ul {
	left: 100%;            
	top: -1px;             
}
nav li:hover > ul {
	height: 8em;
	width: 10em;
	opacity: 1;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav>
  <ul>
    <li>Menu 1
      <ul>
        <li>Sous Menu 1</li>
        <li>Sous Menu 2
          <ul>
            <li>Sous Menu 2.1</li>
            <li>Sous Menu 2.2</li>
            <li>Sous Menu 2.3
              <ul>
                <li>Sous Menu 2.3.1</li>
                <li>Sous Menu 2.3.2</li>
              </ul>
            </li>
            <li>Sous Menu 2.4</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Menu 2</li>
  </ul>
</nav>

Et merci à NoSmocking:lol::lol:

Bonjour,
attention quand même ce menu n'est pas destiné a avoir un rendu à « plat » ce qui explique certaines propriété CSS qui peuvent parasiter le résultat que tu souhaites.

Citation:

Mais je bute sur le caractère mis par :before qui est trop prêt du texte

sa position dépend de la largeur de son parent, ici <li>.
Tu pourrais redéfinir le CSS comme suit :
Code:

1 2 3 4 5 6 7 nav li > ul li:before { content: "\0025B6"; /* modif meilleur rendu */ float: right; color: #333; z-index: -1; margin-right:-1.5em; /* ajout */ }
et il faut également supprimer la largeur/hauteur fixe du conteneur global <ul>.
Code:

1 2 3 4 5 6 7 nav li:hover > ul { /*height: 8em;/* out*/ /*width: 10em;/* out */ height: auto; /* ajout */ width:auto; /* ajout */ opacity: 1; }
et enfin définir pour le parent <li> les propriétés suivantes :
Code:

1 2 3 4 5 nav li ul li{ white-space: nowrap; /* ajout */ padding: 0 .25em; /* modif */ padding-right: 1.5em; /* ajout */ }
Au passage j'en profite pour corriger/supprimer une propriété inutile
Code:

1 2 3 4 5 6 7 nav ul > li { float: left; /* display: inline-block; /* inutile puisque float est défini le display sera dans ce cas block */ line-height: 2em; color: #000; padding: 0 1em; }
Citation:

le 2ème sous-menu est lui aussi trop décalé vers la gauche.

avec les corrections ci-dessus cela devrait aller mieux.

30/01/2017, 08h38
JefReb

1 pièce(s) jointe(s)

Merci d'avoir pris du temps pour me répondre.
J'avais bien compris que ce menu n'était pas pour du plat. Mais je ne comprends pas pourquoi en enlevant le "cosmétique", je n'obtiens pas la même chose.
En fait je voulais supprimer la classe ".menu" pour avoir directement dans la balise <nav> de html5.

Bref, c'est effectivement nickel à présent.

... Sauf que le caractère indiquant un sous menu apparaît aussi sur ceux qui n'ont pas de sous menu.

Pièce jointe 239484

http://codepen.io/JefReb/pen/WRdoGg

Encore merci

Citation:

Mais je ne comprends pas pourquoi en enlevant le "cosmétique",

Oui mais pas que, tu as également supprimé les éléments <a> qui masquaient les flèches non nécessaires.

Pour résoudre ton problème simplement, tu peux remplacer nav li > ul li:before par nav li > ul li.plus:before et modifier le HTML en ajoutant une classe aux éléments <li> ayant une <ul> comme enfant.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <ul> <li>Menu 1 <ul> <li>Sous Menu 1</li> <li class="plus">Sous Menu 2 <ul> <li>Sous Menu 2.1</li> <li>Sous Menu 2.2</li> <li class="plus">Sous Menu 2.3 <ul> <li>Sous Menu 2.3.1</li> <li>Sous Menu 2.3.2</li> </ul> </li> <li>Sous Menu 2.4</li> </ul> </li> </ul> </li> <li>Menu 2</li> </ul>
Tu as un exemple d'utilisation dans cette discussion : https://www.developpez.net/forums/d1...e/#post7878404

30/01/2017, 14h15
JefReb

Exact, c'est parfait.
J'aurais dû trouver la solution.
J'espérais trouver un moyen purement CSS sans rajouter une classe.
Le principal est de comprendre le pourquoi du comment.
Encore merci. je vais clore ce topic. J'espère que cela peut servir à d'autres.

La solution complète avec "cosmétique", sans ancrage <a> uniquement un liste:
http://codepen.io/JefReb/pen/oBpGbx

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
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
body {
	width: 500px;
	margin: 0 auto;
}
nav {
	width: 200px;
	margin: 0;
	padding: 0;
	background: #CCC;
	border: 1px solid #333;
	line-height: 2em;
	height: 2em;
	cursor: pointer;
}
nav ul, nav li {
	position: relative; 
	margin: 0;
	padding: 0;
	list-style: none;
}
nav li {
	line-height: 2em;
	color: #000;
}
/* <LI> de 1st niveau */
nav ul > li {
	float: left;
	line-height: 2em;      
	color: #000;           
	padding: 0 1em;
}
nav li ul li { 
	position: relative;    /* masque l'indication sous menu */
	background: #fff;
	z-index: 0;
}
nav li > ul li.plus:before {
	content: "\0025B6";
	float: right;
	color: #333;
	z-index: -1;
	margin-right:-1.5em;
}
nav li:hover {
	background: #333;
	color: #fff;
}
nav li ul {
	position: absolute;
	left: 0;
	top: 100%;
	height: 0;
	width: 0;
	opacity: 0;
	box-shadow: 1px 2px 25px #888;
	background: #fff;
	border: 1px solid #333;
	transition: all 0.5s ease;
}
/**
* décalage suivant le nombre de <LI>
* dimensions par défaut w=10em, h=8em
**/
nav li ul {
	transform: scale(0) translateY(-8em) translateX(-9em) translateZ(0);
}
 
nav li li ul {
	left: 100%;            
	top: -1px;             
}
nav li ul li{
    white-space: nowrap;    
    padding: 0 .25em;      
    padding-right: 1.5em;  
}
nav li:hover > ul {
	height:auto;
	width:auto;
	opacity: 1;
	transform: scale(1) translateY(0) translateX(0) translateZ(0);
}
/* pour fermeture plus rapide */
nav:not(:hover) li ul {
	transition:all 0s linear;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav>
  <ul>
    <li>Menu 1
      <ul>
        <li>Sous Menu 1</li>
        <li class="plus">Sous Menu 2
          <ul>
            <li>Sous Menu 2.1</li>
            <li>Sous Menu 2.2</li>
            <li class="plus">Sous Menu 2.3
              <ul>
                <li>Sous Menu 2.3.1</li>
                <li>Sous Menu 2.3.2</li>
              </ul>
            </li>
            <li>Sous Menu 2.4</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Menu 2</li>
  </ul>
</nav>

Encore merci à NoSmocking