Liste déroulante un peu speciale

**apdf1** · 11/12/2018, 06h13

Bonjour,
Voila j'ai une liste déroulante que je voudrais modifier. En faite cet une liste à deux niveaux que lorsque je passe sur le nom elle s'ouvre vers droite.
J'aimerai si possible la rendre à trois niveaux!

Je vais essayé de m'expliquer
1er niveau j'ai les noms des régions
2éme niveau j'ai les noms des départements par région
3éme niveau les cartes ex: ain_commune, ain_circonscription ect.... jusque là pas trop de problème.

Mon problème est que j'aimerai que lorsque je clique sur une REGION sa s'ouvre vers le bas et que l'ont retrouve les noms des départements de cette région et quand je passe sur un des noms des départements sa s'ouvre vers la droite avec ex: ain_commune, ain_circonscription ect....

Auvergne-Rhône-Alpes
Ain ain_commune
Allier ain_circonscription
Ardèche ect...
Cantal
Drôme
Isère
Loire
Haute-Loire
Bourgogne-Franche-Comté

Nom : tableau.gif
Affichages : 200
Taille : 8,5 Ko

Nom : tableau.gif
Affichages : 200
Taille : 8,5 Ko

Je joint un fichier exemple:

Je vous remercie d'avance

Max

**SpaceFrog** · 11/12/2018, 08h42

Essaye de structurer tes données sous forme de ul > li imbriquées puis d'affecter des events d'apparition sur le click des li ...

**apdf1** · 11/12/2018, 09h02

Bonjour SpaceFrog

Si je fait:

Code HTML :

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

1
2
3
4
5
6
7
8
9
<ul><a href="#">Auvergne-Rhône-Alpes</a>
              <ul>
			<li><a href="#">Ain </a></li>
			<li><a href="#">Allier </a></li>
		       <li><a href="#">Ardèche</a></li>
		       <li><a href="#">Cantal</a></li>
		      <li><a href="#">Drôme</a></li>
		      <li><a href="#">Isère</a></li>
             </ul>

Je n'ai plus qui s'affiche?
J'ai du faire une boulette!!!

Max

**CaptainMind** · 12/12/2018, 09h08

Pour faire sa tu peut utiliser bootstrap :

http://jsfiddle.net/0fjsmtc4/
https://getbootstrap.com/

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
 
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>
 
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
            <ul>
                <li><a href="" data-toggle="tooltip" data-placement="right" title="Tooltip on right">test</a></li>
            </ul>
      </div>
    </div>
  </div> 
</div>

Code javascript :

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

1
2
3
4
 
$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

EDIT : je te l'ai fait en templating, vanilla javascript :
https://ufile.io/rpkom

**apdf1** · 12/12/2018, 09h26

Bonjour CaptainMind

Je te remercie mais je pense pas que sa corresponde à ma demande?

Bonne journée

Max

**SpaceFrog** · 12/12/2018, 09h36

Je n'ai plus qui s'affiche?
J'ai du faire une boulette!!!

Tu devais avoir un css ou un js associé à ton code précédent ?

**apdf1** · 12/12/2018, 09h47

Bonjour SpaceFrog

Tous le code est sur le fichier joint.

Merci

**CaptainMind** · 12/12/2018, 09h54

XD j'ai trouver !!!!

<ul> SE TAG NE SE FERME PAS !<a href="#">Auvergne-Rhône-Alpes</a>
<ul>
<li><a href="#">Ain </a></li>
<li><a href="#">Allier </a></li>
<li><a href="#">Ardèche</a></li>
<li><a href="#">Cantal</a></li>
<li><a href="#">Drôme</a></li>
<li><a href="#">Isère</a></li>
</ul>
MET UN <ul> ICI

corriger :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<ul><a href="#">Auvergne-Rhône-Alpes</a>
              <ul>
			<li><a href="#">Ain </a></li>
			<li><a href="#">Allier </a></li>
		       <li><a href="#">Ardèche</a></li>
		       <li><a href="#">Cantal</a></li>
		      <li><a href="#">Drôme</a></li>
		      <li><a href="#">Isère</a></li>
             </ul>
<ul>

**apdf1** · 12/12/2018, 10h06

Re,

Non les noms des régions se trouve un dessous l'autre comme ceci.

Auvergne-Rhône-Alpes
Bourgogne-Franche-Comté
Bretagne
Centre-Val de Loire
ect....

Quand je click sur une des régions
Auvergne-Rhône-Alpes
● Ain
● Allier
● Ardèche
● Cantal
● Drôme
● Haute-Loire
● Haute-Savoie
● Isère
● Loire
● Puy-de-Dôme
● Rhône
● Savoie
Bourgogne-Franche-Comté
Bretagne
Centre-Val de Loire

et quand je passe sur un département je devrai avoir ceci:

Auvergne-Rhône-Alpes
● Ain
● Allier
● Ardèche ardeche_cantons
● Cantal ardeche_communes
● Drôme ardeche_circonscriptions
● Haute-Loire ardeche_arrondissements
● Haute-Savoie
● Isère
● Loire
● Puy-de-Dôme
● Rhône
● Savoie
Bourgogne-Franche-Comté
Bretagne
Centre-Val de Loire

Voila je pense que c'est bon

Max

**CaptainMind** · 12/12/2018, 10h10

Au pire, fait des listes imbriquer.

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
 
<ul>
    <li>Auvergne-Rhône-Alpes
        <ul>
            <li>Ain</li>
            <li>Allier</li>
            <li>Ardèche
                <ul>
                    <li>ardeche_cantons</li>
                    <li>ardeche_communes</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

https://jsbin.com/zeropeyiyi/edit?html,output

Invité · 12/12/2018, 10h19

Bonjour,

@apdf1
Je vois que tu te contentes encore d'exposer ton problème, et d'attendre qu'on t'écrive le code...

Envoyé par apdf1

...Tous le code est sur le fichier joint...

Quant à ton "fichier joint" : MERCI de COPIER-COLLER le code directement dans le contenu du message, plutôt que de mettre une pièce jointe.

Envoyé par CaptainMind

Au pire, fait des listes imbriquer.

@CaptainMind
Pourquoi "Au pire" ?
C'est justement ce qui doit être fait !
Et tu as d'ailleurs apporté dans ton dernier code les corrections qui manquaient : une structure <ul><li> correcte.

En l’occurrence, il s'agit maintenant d'écrire le code CSS qui convient.

sous-menu niveau 0 : vertical
sous-menu niveau 1 : en position relative
sous-menu niveau 2 : en position absolute avec left:100%

FAIS UNE RECHERCHE :recherche: : "menu CSS"
Regarde dans la galerie CSS

En voici un, "AU SURVOL" (CSS :hover) : https://codepen.io/jreaux62/pen/gXweLY
En voici un autre, "AU CLIC" (CSS + jQuery) : https://codepen.io/jreaux62/pen/eedRwL

Je t'encourage à faire les EXERCICES que j'ai proposés dans cette discussion.

**apdf1** · 12/12/2018, 14h39

Pour mon ami jreaux62

Je vois que tu te contentes encore d'exposer ton problème, et d'attendre qu'on t'écrive le code...

Voila j'ai fait mon code, il fonctionne mais j'ai besoin de savoir si mon code est correctement fait?

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="fr">
 
<head>
	<meta charset="UTF-8">
	<title>Menu</title>
	<script>
                function afficheMenu(obj){      
                        var idMenu     = obj.id;
                        var idSousMenu = 'sous' + idMenu;
                        var sousMenu   = document.getElementById(idSousMenu);
                        
                        /*****************************************************/
                        /**     on cache tous les sous-menus pour n'afficher    **/
                        /** que celui dont le menu correspondant est cliqué **/
                        /** où 4 correspond au nombre de sous-menus         **/
                        /*****************************************************/
                        for(var i = 1; i <= 4; i++){
                                if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
                                        document.getElementById('sousmenu' + i).style.display = "none";
                                }
                        }       
                        if(sousMenu){
                                //alert(sousMenu.style.display);
                                if(sousMenu.style.display == "block"){
                                        sousMenu.style.display = "none";
                                }
                                else{
                                        sousMenu.style.display = "block";
                                }
                        }       
                }
        </script>
	<style>
                * {
                        box-sizing: border-box;         /* taille des boites width= contenu + padding + border */
                }
                body {
                        font-family: "Times New Roman", Times, serif;
                        font-size: 100%;background: #000;
                }
                        nav {
                        margin-top:150px; /* hauteur des titres*/
                    border: 0px solid #f40b0b;
                    width: 310px;/* largeur du box*/
                    border: 0px solid #FFF;
                    height: 550px; /* hauteur du box*/  
                }
                nav ul {
                        list-style-type: none;
                        padding: 0;     
                }
                nav li {
                        position: relative;
                }
                nav > ul > li  {
                        margin: 0 0 8px 0;/* Ecartement entre les titres*/
                        height: 80px;
                }
                nav a {
                        width: 180px;
                        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 > ul ul {
                        display: none;                                  /* on masque */
                }
                nav li:hover > ul {
                        display: block;                                 /* on affiche */
                }
                        /* positionnement des sous-niveaux */
                nav li ul {
                        position: absolute;
                        left: 170px;
                        top: -2px;
                        z-index:999;
                }
                        nav > ul > li > ul { /*décalage du 2ème niveau */
                        left: 18px;     
                }
                nav li {
                        border-top: 2px solid transparent;
                }
                nav li ul {
                        border-left: 2px solid transparent;
                }
                        nav a:hover {
                        background-color: red;
                        color: #fff;
                }       
                .title{
                    background: #000;left: 50px;top: -15px;
                    color: #82be30; 
                    text-align: center; 
                    font-weight: bold; 
                    font-size: 18px;
                }     
                .region{
                    color: #ad0bf5;  
                    font-weight: bold; 
                    font-size: 14px;
                }
        </style>
</head>
 
<body>
	<main>
		<nav>
			<ul>
				<li><a href="...">France</a>
					<ul class="scrollbar" id="style-2">
						<li class="title">FRANCE</li>
						<div id="menu">
							<div class="menu" id="menu1" onclick="afficheMenu(this)"> <a href="#" class="region">Auvergne-Rhône-Alpes</a>
							</div>
							<div id="sousmenu1" style="display:none">
								<!--1ère région  -->
								<div class="sousmenu">
									<li> <a href="#">Ain</a>
										<ul>
											<li><a href="#">sous-menu 1-1</a>
											</li>
											<li><a href="#">sous-menu 1-2</a>
											</li>
											<li><a href="#">sous-menu 1-3</a>
											</li>
											<li><a href="#">sous-menu 1-4</a>
											</li>
											<li><a href="#">sous-menu 1-5</a>
											</li>
										</ul>
									</li>
								</div>
								<div class="sousmenu">
									<li> <a href="#">Allier</a>
										<ul>
											<li><a href="#">sous-Menu 2-1</a>
											</li>
											<li><a href="#">sous-Menu 2-2</a>
											</li>
											<li><a href="#">sous-Menu 2-3</a>
											</li>
											<li><a href="#">sous-Menu 2-4</a>
											</li>
											<li><a href="#">sous-Menu 2-5</a>
											</li>
										</ul>
									</li>
								</div>
								<div class="sousmenu">
									<li> <a href="#">Ardèche</a>
										<ul>
											<li><a href="#">sous-Menu 3-1</a>
											</li>
											<li><a href="#">sous-Menu 3-2</a>
											</li>
											<li><a href="#">sous-Menu 3-3</a>
											</li>
											<li><a href="#">sous-Menu 3-4</a>
											</li>
											<li><a href="#">sous-Menu 3-5</a>
											</li>
										</ul>
									</li>
								</div>
								<div class="sousmenu">	<a href="#">Cantal</a>
								</div>
								<div class="sousmenu">	<a href="#">Drôme </a>
								</div>
							</div>
							<!--2ème région  -->
							<div class="menu" id="menu2" onclick="afficheMenu(this)">	<a href="#" class="region">Centre-Val de Loire</a>
							</div>
							<div id="sousmenu2" style="display:none">
								<div class="sousmenu">	<a href="#">Cher</a>
								</div>
								<div class="sousmenu">	<a href="#">Eure-et-Loir</a>
								</div>
								<div class="sousmenu">	<a href="#">Indre  </a>
								</div>
							</div>
							<div class="menu" id="menu4" onclick="afficheMenu(this)">	<a href="#" class="region">Bretagne</a>
							</div>
							<div id="sousmenu3" style="display:none">
								<div class="sousmenu">	<a href="#">Côtes-d'Armor</a>
								</div>
								<div class="sousmenu">	<a href="#">Finistère</a>
								</div>
								<div class="sousmenu">	<a href="#">Ille-et-Vilaine</a>
								</div>
								<div class="sousmenu">	<a href="#">Morbihan  </a>
								</div>
							</div>
							<div class="menu" id="menu3" onclick="afficheMenu(this)"> <a href="#" class="region">Corse</a>
							</div>
						</div>
					</ul>
				</li>
			</ul>
		</nav>
	</main>
</body>
 
</html>

Merci

Max

Invité · 12/12/2018, 14h47

1- Je n'ai fait qu'énoncer un fait.

Si tu regarde les réponses, tu constateras que PERSONNE n'a ouvert ta pièce jointe.
Notamment car on n'a NI le temps, NI l'envie de le faire.

DONC : si tu veux vraiment des réponses PRÉCISES, montre un peu plus de BONNE VOLONTE :

MONTRE ~~ton~~ le code (NÉCESSAIRE ET SUFFISANT)
donne des EXPLICATIONS (ce que tu as essayé, et qui n'a pas fonctionné,...)

2- Quant a ton nouveau code, on peut optimiser.

Remplace :

Code :

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

1
2
3
4
5
6
				if(sousMenu.style.display == "block"){
					sousMenu.style.display = "none";
				}
				else{
					sousMenu.style.display = "block";
				}

par :

Code :

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

					sousMenu.style.display = (sousMenu.style.display == "block")? "none" : "block"; // opérateur ternaire

**apdf1** · 12/12/2018, 15h42

Re,

J'ai juste un petit souci, lorsque je sort de mon menu si j'ai cliqué sur une région auparavant j'ai toujours le afficheMenu du code javascript qui est actif.

**SpaceFrog** · 12/12/2018, 16h10

a toi d'indiquer quand replier le ou les menus ouverts

**apdf1** · 12/12/2018, 16h13

Re,

Oui mais comment?

Liste déroulante un peu speciale

JavaScript

Discussions similaires

Partager

Partager