Ajouter un niveau au menu

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,

J'ai un menu auquel je recherche un code pour rajouter un niveau.
Voici mon code:

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
<title>Un menu vertical </title>
 
                              <style>
                            body{background: #000;}
                            #menu
                            { position: absolute;top: 80px;width:0;
                            }
                            #menu li
                            {position:relative;list-style:none;
                            }
                            #menu > li
                            {margin:0 0 25px 0;height:80px;left:-30px;font-size: 12px;
                            }
                            #menu > li > a 
                            {position:relative;display:inline-block;height:0px;width:0px;background-color:green;left:-35px;top:15px;
                            }
                            #menu > li > a span 
                            {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);transform: rotate(-90deg);writing-mode: lr-tb;display:inline-block;background-color:#171515;text-align:center;color:red;/*police titre*/padding:10px 10px;width:80px;
                            }
                            #menu > li > ul
                            {position:absolute;display:none;top:-17px;left:0px;
                            }
 
                            #menu > li:hover > ul
                            {display:block;clear:both;
                            }
                            #menu > li > ul > li
                            {
                            }
                            #menu > li > ul > li > a
                            {display:inline-block;width:120px;background-color:#000;color:white;/*police hover*/padding:2px 10px;margin:2px 0 0;text-decoration:none;
                            }
                            #menu > li > ul > li:hover > a
                            {background-color:red;/*fond hover*/
                                color:#ffffff;/*police hover passage curseur*/
                            }
 
</style>
 
</head>
<body>
 
<main>        
<div id="menu">
 
    <ul id="menu">
            <li><a href="..."><span>Afrique</span></a>
                <ul>
              <li class="sous-menu"><a href="Afrique_du_Sud.html">Afrique du Sud</a></li>
              <li class="sous-menu"><a href="Algérie.html">Algérie</a></li>
              <li class="sous-menu"><a href="Angola.html">Angola</a></li>
              <li class="sous-menu"><a href="Bénin.html">Bénin</a></li>
              <li class="sous-menu"><a href="Botswana.html">Botswana</a></li>
              <li class="sous-menu"><a href="Burkina_Faso.html">Burkina Faso </a></li>
              <li class="sous-menu"><a href="Burundi.html">Burundi </a></li>
              <li class="sous-menu"><a href="Cameroun.html">Cameroun </a></li>
              <li class="sous-menu"><a href="Cap-Vert.html"> Cap-Vert</a></li>
              <li class="sous-menu"><a href="République_centrafricaine.html">République centrafricaine </a></li>
 
 
                </ul>
            </li>
 
        </ul>
 
  </div> </main>

Je vous remercie de votre aide

Cordialement

Max

Bonjour,

Dans mon menu j'ai deux niveaux, le 1er "Continent" le second les "Pays"du continent, j'aimerais avoir un troisième niveau en relation avec les pays

Voila alors j'ai fait ceci qui me parait pas mal.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
       <li><a href="..."><span>Europe</span></a>
                <ul class="scrollbar"id="style-2" >
 
  <li class="sous-menu"><a href="Albanie.html">Albanie </a>
 
               <ul class="rang3">
                            <li><a href="#">Hauts de france</a></li>
							<li><a href="#">Sous-menuxxx 4.1.2</a></li>
							<li><a href="#">Sous-menuxxx 4.1.3</a></li>
 
                    </ul>  </li>   
 
    </ul></li>

Le problème est que je n'arrive pas à configurer le Css.

Je vous remercie de votre aide

Max

Voici un code qui fonctionne, même pour encore un autre niveau supplémentaire sans rajouter du css.
Toutefois, c'est le premier niveau vertical qui me pose un problème et comme cela m'intéresse je suis en train de chercher.
Mais tout de suite voici une solution.
J'essaye toujours de simplifier en utilisant les balises html5 (<nav> ) et en évitant au maximum l'utilisation de classe.
Comme tu peux le voir c'est très facile.

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
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
nav {
	margin-top:50px;
}
nav > ul {
	width: 20px;
}
nav ul {
	list-style-type: none;
	padding: 0;
 
}
nav a {
	width: 120px;
	line-height: 20px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;
}
nav > ul > li > a {
/*	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	writing-mode: lr-tb;*/
	background-color: #171515;
	color: red;
	width: 80px;
	height:20px;
}
nav li {
	position: relative;
}
nav li ul {
	position: absolute;
	left: 80px;
	top: -2px;	
}
nav li {
	border-top: 2px solid transparent;
}
nav li ul {
	border-left: 2px solid transparent;
}
nav > ul ul {
	display: none; 					/* on masque */
}
nav li:hover > ul {
	display: block; 				/* on affiche */
}
nav a:hover {
	background-color: red;
	color: #fff;
}
nav > ul > li > a:hover {
	background-color: #171515; /* pas de changement pour le premier niveau */
	color: red;
}

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
<main>
  <nav>
    <ul>
      <li><a href="...">Afrique</a>
        <ul>
          <li><a href="#">Afrique du Sud</a></li>
          <li><a href="#">Algérie</a></li>
          <li><a href="#">Angola</a></li>
          <li><a href="#">Bénin</a></li>
          <li><a href="#">Botswana</a></li>
          <li><a href="#">Burkina Faso </a></li>
          <li><a href="#">Burundi </a></li>
          <li><a href="#">Cameroun </a></li>
          <li><a href="#"> Cap-Vert</a></li>
          <li><a href="#">République centrafricaine </a></li>
        </ul>
      </li>
      <!--==========================================-->
      <li><a href="...">Europe</a>
        <ul>
          <li><a href="#">Albanie </a>
            <ul>
              <li><a href="#">Hauts de france</a></li>
              <li><a href="#">Sous-menuxxx 4.1.2</a></li>
              <li><a href="#">Sous-menuxxx 4.1.3</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <!--============================================-->
    </ul>
  </nav>
</main>

Pour l'instant je cherche pour le premier niveau vertical. Si tu as la réponse, n'oublie pas de la mettre dans le forum pour que tous en profite.

Bon je pense avoir trouvé, mais il est peut être possible de simplifier le vertical.
(J'espère que Jreax62 ne dira pas que c'est une usine à gaz ... :D

Voir: https://codepen.io/JefReb/pen/eeNJQV

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
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
nav {
	margin-top:50px;
}
nav > ul {
	/*width: 20px;*/
}
nav ul {
	list-style-type: none;
	padding: 0;
 
}
nav li {
	position: relative;
}
nav > ul > li  {
	margin: 0 0 25px 0;
	height: 80px;
}
nav a {
	width: 120px;
	line-height: 20px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;
}
nav > ul > li > a {
	position: relative;
	left: -35px;
	top: 15px;
	display: inline-block;
	height: 0px;
	width: 0px;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	writing-mode: lr-tb;
	background-color: #171515;
	color: red;
	width: 80px;
	height:20px;
}
nav li ul {
	position: absolute;
	left: 120px;
	top: -2px;
	z-index:999;
}
nav > ul > li > ul {
	left: 18px;	
}
nav li {
	border-top: 2px solid transparent;
}
nav li ul {
	border-left: 2px solid transparent;
}
nav > ul ul {
	display: none; 					/* on masque */
}
nav li:hover > ul {
	display: block; 				/* on affiche */
}
nav a:hover {
	background-color: red;
	color: #fff;
}
nav > ul > li > a:hover {
	background-color: #171515; /* pas de changement pour le premier niveau */
	color: red;
}

31/10/2017, 11h28
apdf1

Salut JefReb

Super! je pense que je ferais avec sa.
Je vais voir avec tous les pays si sa tombe bien et je te tiens courant

Je te remercie beaucoup et si tu trouve autre chose je suis preneur.

Merci et bonne journée

Max
31/10/2017, 13h08
Invité

Bonjour,

Il faut penser à enlever (ou désactiver) les liens des menus qui ont un sous-menu.

Bonjour jreaux62,

Ha effectivement, j'avais repris le code d'apf1 sans corriger:

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
<main>
  <nav>
    <ul>
      <li><a href="#">Afrique</a>
        <ul>
          <li><a href="#">Afrique du Sud</a></li>
          <li><a href="#">Algérie</a></li>
          <li><a href="#">Angola</a></li>
          <li><a href="#">Bénin</a></li>
          <li><a href="#">Botswana</a></li>
          <li><a href="#">Burkina Faso </a></li>
          <li><a href="#">Burundi </a></li>
          <li><a href="#">Cameroun </a></li>
          <li><a href="#"> Cap-Vert</a></li>
          <li><a href="#">République centrafricaine </a></li>
        </ul>
      </li>
      <!--==========================================-->
      <li><a href="#">Europe</a>
        <ul>
          <li><a href="#">Albanie </a>
            <ul>
              <li><a href="#">Hauts de france</a></li>
              <li><a href="#">Sous-menuxxx 4.1.2</a></li>
              <li><a href="#">Sous-menuxxx 4.1.3</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <!--============================================-->
    </ul>
  </nav>
</main>

Mais ce qui me "chagrine", c'est de ne pas arriver à simplifier le premier niveau vertical perpendiculaire.

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
nav li {
	position: relative;
}
nav > ul > li  {
	margin: 0 0 25px 0;
	height: 80px;
}
nav a {
	width: 120px;
	line-height: 20px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;
}
nav > ul > li > a {
	position: relative;
	left: -35px;
	top: 15px;
	display: inline-block;
	height: 0px;
	width: 0px;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	writing-mode: lr-tb;
	background-color: #171515;
	color: red;
	width: 80px;
	height:20px;
}

une idée? sinon tant mieux.

Code:

1
2
3
      <li><a href="#">Afrique</a>
        <ul>
          <li><a href="#">Afrique du Sud</a></li>

Justement NON : Afrique A un sous-menu -> il faut enlever le lien :

Code:

1
2
3
      <li>Afrique
        <ul>
          <li><a href="#">Afrique du Sud</a></li>

ou :

Code:

1
2
3
      <li><a href="javascript:void(0);">Afrique</a>
        <ul>
          <li><a href="#">Afrique du Sud</a></li>

L'opérateur void()

31/10/2017, 16h28
JefReb
NON
car dans ce cas, la balise <a> étant manquante, il n'y a plus la mise en forme css et le texte est horizontal.
donc il faut mettre:
Code:

1 2 3 <li><a>Afrique</a> <ul> <li><a href="#">Afrique du Sud</a></li>
Donc il y a peut être une différence que je ne vois pas, mais le <a> est important.
01/11/2017, 08h29
apdf1

Bonjour JefReb,

Je te remercie encore pour ton code. Je suis en train d'ajouter les noms au menu, après avoir essayer à plusieurs reprises j'ai des soucis pour rentrer les noms "question de largeur" Comment peut-on changer la largeur des sous menu ?

Je te remercie et te souhaite une bonne journée

Max

Ce n'est pas trop difficile, mais il faut savoir ce que l'on fait.
Si tu ne veux agrandir qu'un seul poste, cela ne va pas être très beau.
Donc tu peux changer la largeur de tous les niveaux par:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
nav a {
	width: 120px;             /* ICI */
	line-height: 20px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;	
}
 
nav li ul {
	position: absolute;
	left: 120px;            /* et ICI ne pas oublier le décallage vers la droite */
	top: -2px;
	z-index:999;
}

Par contre si tu veux modifier uniquement le 3ème niveau, il faut cibler:

Code:

1
2
3
nav > ul ul ul li > a {
	width:300px;
}

Exemple complet avec 2ème niveau à 150px et 3ème niveau à 300px:

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
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
nav {
	margin-top:50px;
}
nav ul {
	list-style-type: none;
	margin:0;
	padding: 0;
 
}
nav li {
	position: relative;
 
}
nav > ul > li  {
	margin: 0 0 25px 0;
	height: 80px;
}
nav a {
	width: 150px;
	line-height: 20px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;	
}
nav > ul > li > a {
	width: 80px;
	height:20px;	
	position: relative;
	left: -35px;
	top: 15px;
	background-color: #171515;
	color: red;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);		
}
nav > ul > li {
	border-top:none;
}	
nav li ul {
	position: absolute;
	left: 150px;
	top: -2px;
	z-index:999;
}
nav > ul ul ul li > a {
	width:300px;
}
nav > ul > li > ul {
	left: 15px;	
}
nav li ul {
	border-left: 2px solid transparent;
}
nav > ul ul {
	display: none; 					/* on masque */
}
nav li:hover > ul {
	display: block; 				/* on affiche */
}
nav a:hover {
	background-color: red;
	color: #fff;
}
nav > ul > li > a:hover {
	background-color: #171515; /* pas de changement pour le premier niveau */
	color: red;
}

01/11/2017, 11h17
JefReb
J'ai très mal répondu à jreaux62.
Je ne comprends pas trop la différence entre :
Code:

1 2 3 4 5 6 7 8 9 <ul> <li><a>Afrique</a> /* ===== ou ===== */ <ul> <li><a href="#">Afrique</a> /* ===== et ou ===== */ <ul> <li><a href="javascript:void(0);">Afrique</a>
On apprend à tout age, mais j'aimerais bien comprendre pourquoi le # est à proscrire ou l'utilisation du javascript.
Désolé, mais c'est la première fois que je lis l'utilisation du void.

Merci à Jreaux62 si il veut bien me répondre.:oops:
01/11/2017, 11h18
apdf1

Re,

Je te remercie et te souhaite une bonne journée

Max

Désolé, mais il n'y a que les imbéciles qui ne changent pas d'idées.
La solution que j'ai donné ne me plaisait pas, car il y avait des problèmes de positionnement et de séparations et un peu de simplifications.
Voici la dernière version que je propose avec un premier sous-niveau de 150px et un deuxième sous-niveau de 300px.

https://codepen.io/JefReb/pen/RjWPxr

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
87
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
nav {
	margin-top:50px;
}
nav ul {
	list-style-type: none;
	margin:0;
	padding: 0;
 
}
nav li {
	position: relative;
 
}
nav > ul > li  {
	margin: 0 0 25px 0;
	height: 80px;
}
/* définition des liens */
nav a {
	width: 150px;
	line-height: 24px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;	
}
/* Pour le premier niveau uniquement */
nav > ul > li > a {
	width: 80px;
	height:24px;	
	position: relative;
	left: -35px;
	top: 15px;
	background-color: #171515;
	color: red;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);		
}
/* positionnement des sous-niveaux */
nav li ul {
	position: absolute;
	left: 150px;
	top: -15px;
	z-index:999;
}
/* décalage du 2ème niveau */
nav > ul > li > ul {
	left: 18px;
}
/* décalage du 3ème niveau */
nav > ul > li > ul ul {
	top: -2px;;
}
nav > ul ul ul a {
	width:300px;					/* largeur du 3ème niveau */
}
/* espacement des sous-niveaux */
nav li ul {
	border-left: 2px solid transparent;
}
nav li ul li {
	border-top: 2px solid transparent;
}
/* Propriétés au survol de la souris */
nav > ul ul {
	display: none; 					/* on masque */
}
nav li:hover > ul {
	display: block; 				/* on affiche */
}
nav a:hover {
	background-color: red;
	color: #fff;
}
nav > ul > li > a:hover {
	background-color: #171515; 		/* pas de changement pour le premier niveau */
	color: red;
}

Bonjour,

1- pour les sous-niveaux, on n'est pas obligé de ré-écrire la largeur ou la position left en pixel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
nav li {
	width:150px; /*largeur des sous-menus*/
}
nav a {
	display: block;
}
nav li ul {
	position: absolute;
	width: 100%; /* même largeur que son parent */
	left: 100%; /* à droite de son parent */
	top: -15px;
	z-index:999;
}
nav > ul ul ul a {
	/*width:300px;*/	/* INUTILE,  si même largeur que son parent */
}

2- Quant aux espacements des sous-niveaux, pas besoin de border :

Code:

1
2
3
4
5
6
7
8
9
10
11
nav li {
	position: relative;
	margin:2px; /* espacement des sous-niveaux */
}
/* espacement des sous-niveaux */
nav li ul {
	/*border-left: 2px solid transparent;*/	/* INUTILE */
}
nav li ul li {
	/*border-top: 2px solid transparent;*/	/* INUTILE */
}

3- couleur au :hover :
remplacer

Code:

1
2
3
4
5
6
7
8
nav a:hover {
	background-color: red;
	color: #fff;
}
nav > ul > li > a:hover {
	background-color: #171515; 		/* pas de changement pour le premier niveau */
	color: red;
}

par

Code:

1
2
3
4
nav > ul li:hover > a {
	background-color: green;
	color: white;
}

+ quelques ajustements ici et là...

01/11/2017, 17h13
JefReb

Merci Jreaux62, toujours aussi concis et précis...
Mais je ne sais toujours pas pourquoi on ne peut pas mettre

Code:

<li><a href="#">Afrique</a>
01/11/2017, 17h33
Invité

A cause des médias TACTILES.

Dès qu'on pose le doigt, ça active le lien (# : ici, une ancre vide).

D'ailleurs, on évite de plus en plus d'utiliser :hover pour cette raison.
On préfère "au clic".

D'où mon menu : https://codepen.io/jreaux62/pen/dPxKKQ (qui fonctionne "au clic").

Arrg! les médias TACTILES! je les oublie toujours ceux la!
D'accord, il faut que j'y pense plus souvent.

Par contre sur les modifications du menu j'ai quand même quelques remarques.

D'accord pour le 1)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 nav li { width:150px; /*largeur des sous-menus*/ } nav a { display: block; } nav li ul { position: absolute; width: 100%; /* même largeur que son parent */ left: 100%; /* à droite de son parent */ top: -15px; z-index:999; } nav > ul ul ul a { /*width:300px;*/ /* INUTILE, si même largeur que son parent */ }
Mais dans ce cas il ne faut pas oublier que le premier niveau est écrit verticalement.
Il faut donc, quand même, décaler le premier sous-niveau pour qu'il ne soit pas éloigné de 100% sur la droite:
Code:

1 2 3 4 /* décalage du 2ème niveau dû à la position vertical du texte*/ nav > ul > li > ul { left: 18px; }
Je suis d'accord aussi pour le 2)
Remplacer le border par un margin:2px; est plus simple

Mais je ne suis pas d'accord pour le 3)
Avec ce changement tous les liens sont changés y compris le premier niveau qui ne doit pas l'être.
Code:

1 2 3 4 nav > ul li:hover > a { background-color: green; color: white; }

01/11/2017, 18h38
Invité

Citation:

Envoyé par jreaux62

+ quelques ajustements ici et là...

Je te laisse le soin de faire les ajustements nécessaires ;)
01/11/2017, 19h30
JefReb

Yes sir. ... mais je ne suis pas l'auteur de cette question.
Mais je m'y intéresse ...:)

Voir 40 message(s) de cette discussion en une page