Ajouter un niveau au menu

**apdf1** · 30/10/2017, 09h15

Bonjour,

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

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
<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

**apdf1** · 30/10/2017, 12h45

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 html :

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

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

**JefReb** · 31/10/2017, 10h20

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 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
* {
	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 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
<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.

**JefReb** · 31/10/2017, 10h57

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 ...

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

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
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;
}

**apdf1** · 31/10/2017, 12h28

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

Invité · 31/10/2017, 14h08

Bonjour,

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

Ajouter un niveau au menu

CSS

Vue hybride

Discussions similaires

Partager

Partager