Ouverture menu deroulant

**apdf1** · 18/08/2018, 07h55

Bonjour

Voilà j'ai un menu qui fonctionne très bien mais j'aimerais lui apporté une modification.

lorsque l'on passe sur un nom ex: " États-Unis " le: li:hover ul ouvre la liste vers le bas.
J'aimerais qu'il puisse l'ouvrir sur un clique.

Je vous joint mon code

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
<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8" />
 
 
 
  <style type="text/css">
      body{background: #fff;}
       #menu{
           height: 530px; 
           width: 230px; 
           overflow-y:scroll; 
           border:#000000 0px solid;}  
      
       li ul {
           display:none;}
      
       li:hover ul {
           display:block;
           position:relative;
           top:0;
           left:-25px;}
 
       a:link {
           color:#fff;text-decoration: none;}             /* Lien non visité */
       a:visited {
           color:#415F77;}                                /* Lien visité */
       a:hover {
           color:red; font-size: 16px;Font-Weight: Bold;} /* Lien survolé*/
       a:active {
           color:#fff;}                                   /* Lien sélectionné */    
      
 
  </style>
 
</head><body>
 
<h4>Menu déroulant</h4>
 
                           <ul id="menu">
                           <li><a href="">Antigua-et-Barbuda</a></li>
                           <li><a href="">Argentine</a></li>
                           <li><a href="">Bahamas</a></li>
                           <li><a href="">Barbade</a></li>
                           <li><a href="">Belize</a></li>
                           <li><a href="">Bolivie</a></li>
                           <li><a href="">Brésil</a></li>
                           <li><a href="">Canada</a></li>
                           <li><a href="">Chili</a></li>
                           <li><a href="">Colombie</a></li>
                           <li><a href="">Costa Rica</a></li>
                           <li><a href="">Cuba</a></li>
                           <li><a href="">Dominique</a></li>
                           <li><a href="">El Salvador</a></li>
                           <li><a href="">Equateur</a></li>
 
                                          <li><a href=""> Etats-Unis</a>
                                            <ul>
                                             <li><a href="">Alabama</a></li>
                                             <li><a href="">Alaska</a></li>
                                             <li><a href="">Arizona</a></li>
                                             <li><a href="">Arkansas</a></li>
                                             <li><a href="">Jamaïque</a></li>
                                             <li><a href="">Mexique</a></li>
                                             <li><a href="">Nicaragua</a></li>
                                             <li><a href="">Californie</a></li>
                                             <li><a href="">Caroline du Nord</a></li>
                                             <li><a href="">Caroline du Sud</a></li>
                                             <li><a href="">Colorado</a></li>
                                             <li><a href="">Connecticut</a></li>
                                             <li><a href="">Dakota du Nord</a></li>
                                             <li><a href="">Dakota du Sud</a></li>
                                             <li><a href="">Delaware</a></li>
                                            </ul>
                                          </li>
                           <li><a href="">Grenade</a></li>
                           <li><a href="">Guatemala</a></li>
                           <li><a href="">Guyana</a></li>
                           <li><a href="">Haïti</a></li>
                           <li><a href="">Honduras</a></li>
                           <li><a href="">Jamaïque</a></li>
                           <li><a href="">Mexique</a></li>
                           <li><a href="">Nicaragua</a></li>
                           <li><a href="">Panama</a></li>
                           </ul>
 
</body>
 
</html>

Je vous remercie d'avance

Max

Invité · 18/08/2018, 10h53

Bonjour,

1- Explique-nous à quoi va servir cette liste.
Car les listes à rallonge comme ça, avec en plus un overflow-y:scroll;, ça atteint vite ses limites, et ce n'est pas très pratique.

2- A mon avis, le mieux est de réaliser un formulaire, avec :

une (vraie) liste déroulante <select>.
une 2ème liste déroulante <select> peut être affichée et alimentée via Ajax (OU PAS*) en fonction du choix dans la 1ère ("Etats-Unis", par exemple).
et un bouton "submit"

3- voici une solution SANS AJAX : https://codepen.io/jreaux62/pen/GBVbEQ

il faut évidemment remplir pour chaque Pays (liste et sous-listes) : <option value="........"> avec l'URL de la page de destination.

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
<h4>Menu déroulant</h4>
 
<nav id="menu">
<form id="myformPays" action="" onsubmit="checkAction(this);">
	<select onchange="PaysSousListe(this, 'PaysSousListe'); actionBySelect(this, 'myformPays');">
		<option value="">...choisissez un Pays...</option>
		<option value="">Antigua-et-Barbuda</option>
		<option value="">Argentine</option>
		<option value="">Bahamas</option>
		<option value="">Barbade</option>
		<option value="">Belize</option>
		<option value="">Bolivie</option>
		<option value="">Brésil</option>
		<option value="">Canada</option>
		<option value="">Chili</option>
		<option value="">Colombie</option>
		<option value="">Costa Rica</option>
		<option value="">Cuba</option>
		<option value="">Dominique</option>
		<option value="">El Salvador</option>
		<option value="">Equateur</option>
 
		<option value="" data-souslist="1"> Etats-Unis (+)</option>
 
		<option value="">Grenade</option>
		<option value="">Guatemala</option>
		<option value="">Guyana</option>
		<option value="">Haïti</option>
		<option value="">Honduras</option>
		<option value="">Jamaïque</option>
		<option value="">Mexique</option>
		<option value="">Nicaragua</option>
		<option value="">Panama</option>
	</select>
	<span id="PaysSousListe"></span>
	<input type="submit" value="OK" />
</form>
</nav>

Pour chaque pays avec une sous-liste, on ajoute un data-souslist :
(on peut ajouter " (+)", pour montrer qu'il y a plus d'options)

Code html :

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

		<option value="" data-souslist="1"> Etats-Unis (+)</option>

Code JavaScript :

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
// Afficher / masquer la Sous-Liste
function PaysSousListe( sel, souslist_id )
{
	var sousListArr = [];
	// 1 = Etats-Unis
	sousListArr[1] = 
	'	<select onchange="actionBySelect(this, \'myformPays\');">'
	+'		<option value="">...choisissez...</option>' // option vide nécessaire (car il faut imposer un choix)
	+'		<option value="">Alabama</option>'
	+'		<option value="">Alaska</option>'
	+'		<option value="">Arizona</option>'
	+'		<option value="">Arkansas</option>'
	+'		<option value="">Jamaïque</option>'
	+'		<option value="">Mexique</option>'
	+'		<option value="">Nicaragua</option>'
	+'		<option value="">Californie</option>'
	+'		<option value="">Caroline du Nord</option>'
	+'		<option value="">Caroline du Sud</option>'
	+'		<option value="">Colorado</option>'
	+'		<option value="">Connecticut</option>'
	+'		<option value="">Dakota du Nord</option>'
	+'		<option value="">Dakota du Sud</option>'
	+'		<option value="">Delaware</option>'
	+'	</select>';
	// ici, on peut ajouter d'autres sous-listes....
 
	//  console.log( sel.options[sel.selectedIndex].dataset.souslist );
	if( sel.options[sel.selectedIndex].dataset.souslist )
	{
		var souslist_num = Number( sel.options[sel.selectedIndex].dataset.souslist );
		document.getElementById( souslist_id ).innerHTML = sousListArr[souslist_num]; // on remplit la sous-liste
//  console.log( souslist_num );
	} else {
		document.getElementById( souslist_id ).innerHTML = ""; // on vide la sous-liste
	}
}

Code JavaScript :

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
 
// Modifier l attribut action du <form>
function actionBySelect( sel, form_id ){
	var myform = document.getElementById( form_id );
	myform.setAttribute('action', sel.value); // on met l URL dans action
}
// on vérifie que l action n'est pas vide avant de soumettre le formulaire
function checkAction( myform )
{
	if( myform.getAttribute('action') == '' ) // action vide
	{
		alert('Vous devez choisir un pays');
		return false;
	} else {
		return true; // OK : on soumet le formulaire
	}
}

N.B. J'ai simplifié l'écriture de l'array JavaScript sousListArr.
Un codage "plus propre" supposerait d'écrire chaque balise (select, option) via le DOM ; Ça complique le script, et alourdit inutilement ici.

Invité · 18/08/2018, 12h29

Voici une variante, sans le bouton "OK" : https://codepen.io/jreaux62/pen/bjXPLO

1- Important :

Comme pour un lien <a>, le formulaire sera soumis automatiquement sur sélection d'un pays ou sous-liste
dans ce cas, pour chaque Pays avec sous-liste, IL NE FAUT PAS mettre de value : <option value="" data-souslist="1"> Etats-Unis</option> (laisser value vide)

2- on modifie le formulaire :

Code :

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

<form id="myformPays" action="">

2- on supprime du formulaire :

Code :

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

	<input type="submit" value="OK" />

3- on modifie les fonctions actionBySelect et checkAction.

Ce qui donne :

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
<h4>Menu déroulant</h4>
 
<nav id="menu">
<form id="myformPays" action="">
	<select onchange="PaysSousListe(this, 'PaysSousListe'); actionBySelect(this, 'myformPays');">
		<option value="">...choisissez un Pays...</option>
		<option value="">Antigua-et-Barbuda</option>
		<option value="">Argentine</option>
		<option value="">Bahamas</option>
		<option value="">Barbade</option>
		<option value="">Belize</option>
		<option value="">Bolivie</option>
		<option value="">Brésil</option>
		<option value="">Canada</option>
		<option value="">Chili</option>
		<option value="">Colombie</option>
		<option value="">Costa Rica</option>
		<option value="">Cuba</option>
		<option value="">Dominique</option>
		<option value="">El Salvador</option>
		<option value="">Equateur</option>
 
		<option value="" data-souslist="1"> Etats-Unis (+)</option>
 
		<option value="">Grenade</option>
		<option value="">Guatemala</option>
		<option value="">Guyana</option>
		<option value="">Haïti</option>
		<option value="">Honduras</option>
		<option value="">Jamaïque</option>
		<option value="">Mexique</option>
		<option value="">Nicaragua</option>
		<option value="">Panama</option>
	</select>
	<span id="PaysSousListe"></span>
</form>
</nav>

(ce code ne change pas) :

Code JavaScript :

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
// Afficher / masquer la Sous-Liste
function PaysSousListe( sel, souslist_id )
{
	var sousListArr = [];
	// 1 = Etats-Unis
	sousListArr[1] = 
	'	<select onchange="actionBySelect(this, \'myformPays\');">'
	+'		<option value="">...choisissez...</option>' // option vide nécessaire (car il faut imposer un choix)
	+'		<option value="">Alabama</option>'
	+'		<option value="">Alaska</option>'
	+'		<option value="">Arizona</option>'
	+'		<option value="">Arkansas</option>'
	+'		<option value="">Jamaïque</option>'
	+'		<option value="">Mexique</option>'
	+'		<option value="">Nicaragua</option>'
	+'		<option value="">Californie</option>'
	+'		<option value="">Caroline du Nord</option>'
	+'		<option value="">Caroline du Sud</option>'
	+'		<option value="">Colorado</option>'
	+'		<option value="">Connecticut</option>'
	+'		<option value="">Dakota du Nord</option>'
	+'		<option value="">Dakota du Sud</option>'
	+'		<option value="">Delaware</option>'
	+'	</select>';
	// ici, on peut ajouter d'autres sous-listes....
 
	//  console.log( sel.options[sel.selectedIndex].dataset.souslist );
	if( sel.options[sel.selectedIndex].dataset.souslist )
	{
		var souslist_num = Number( sel.options[sel.selectedIndex].dataset.souslist );
		document.getElementById( souslist_id ).innerHTML = sousListArr[souslist_num]; // on remplit la sous-liste
//  console.log( souslist_num );
	} else {
		document.getElementById( souslist_id ).innerHTML = ""; // on vide la sous-liste
	}
}

on modifie les fonctions actionBySelect et checkAction :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Modifier l attribut action du <form>
function actionBySelect( sel, form_id ){
	var myform = document.getElementById( form_id );
	myform.setAttribute('action', sel.value); // on met l URL dans action
  if( sel.value != '' && checkAction( myform ) )
    {
      myform.submit(); // on soumet AUTOMATIQUEMENT le formulaire
    }
}
// on vérifie que l action n'est pas vide avant de soumettre le formulaire
function checkAction( myform )
{
	return ( myform.getAttribute('action') != '' ); // false si vide
}

**apdf1** · 18/08/2018, 21h10

Bonjour jreaux62,

Je te remercie beaucoup mais j'ai un petit souci je n'arrive pas à mettre un lien vers une page en partant du deuxième code. J'ai suivi les commentaires mais je ne suis pas arrivé.

Merci et bonsoir

Max

Invité · 18/08/2018, 21h30

Montre ton code (avec les URL dans les value des <option>).

**apdf1** · 18/08/2018, 21h51

Re,

Code :

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

1
2
3
4
5
6
7
8
9
	'	<select onchange="actionBySelect(this, \'myformPays\');">'
	+'		<option value="">...choisissez...</option>' // option vide nécessaire (car il faut imposer un choix)
	+'		<option value="href=http://Alabama.html">Alabama</option>'
	+'		<option value="">Alaska</option>'
	+'		<option value="">Arizona</option>'
	+'		<option value="">Arkansas</option>'
	+'		<option value="">Jamaïque</option>'
	+'		<option value="">Mexique</option>'
	+'		<option value="">Nicaragua</option>'

Ouverture menu deroulant

JavaScript

Vue hybride

Discussions similaires

Partager

Partager