Liste déroulante un peu speciale

Version imprimable

11/12/2018, 06h13
apdf1

2 pièce(s) jointe(s)

Liste déroulante un peu speciale

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é

Pièce jointe 433496

Je joint un fichier exemple:

Je vous remercie d'avance

Max
11/12/2018, 08h42
SpaceFrog

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

Bonjour SpaceFrog

Si je fait:

Code:

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

Pour faire sa tu peut utiliser bootstrap :

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

Code:

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:

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

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

12/12/2018, 09h26
apdf1

Bonjour CaptainMind

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

Bonne journée

Max
12/12/2018, 09h36
SpaceFrog

Citation:

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 ?
12/12/2018, 09h47
apdf1

Bonjour SpaceFrog

Tous le code est sur le fichier joint.

Merci

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:

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>

12/12/2018, 10h06
apdf1

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

Au pire, fait des listes imbriquer.

Code:

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

12/12/2018, 10h19
Invité
Bonjour,

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

Citation:

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.

Citation:

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.

Pour mon ami jreaux62

Citation:

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:

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

12/12/2018, 14h47
Invité
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:

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

Code:

sousMenu.style.display = (sousMenu.style.display == "block")? "none" : "block"; // opérateur ternaire
12/12/2018, 15h42
apdf1

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.
12/12/2018, 16h10
SpaceFrog

a toi d'indiquer quand replier le ou les menus ouverts
12/12/2018, 16h13
apdf1

Re,

Oui mais comment?