Afficher les sous menus d'un simple clic sur le menu parent ?

**apdf1** · 31/12/2017, 15h56

Bonjour,

J'ai un menu déroulant qui fonctionne avec "Hover" dans cette ex: "États-Unis" s'ouvre au passage de la souris.
Ce que je souhaiterai, c'est que seul les éléments de niveau 1 apparaissent et que quand on clique dessus les éléments de niveau 2 ici "États-Unis" correspondant apparaissent. Je 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
<style type="text/css">
      
       #menu{
           height: 450px; 
           width: 200px; 
           overflow:scroll; 
           border:#000000 1px 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="">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>

Je vous remercie d'avance

Cordialement
Max

Invité · 01/01/2018, 11h15

Bonne Année,

1- la 1ère chose à faire est de supprimer (ou désactiver) le lien sur "Etats-Unis". Sinon, on active le lien.

2- ensuite, 2 solutions :

en JavaScript (onclick....)
en CSS avec un input radio (caché), un label et la pseudo-classe CSS :checked

Code html :

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

1
2
3
4
5
6
  <li>
    <input id="usa" type="checkbox" />
    <label for="usa"> Etats-Unis</label>
    <ul>
      <li><a href="">Alabama</a></li>
...

Code css :

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

1
2
3
4
5
#menu li input { display:none; }
#menu li input:checked ~ ul { display:block; }
#menu li label { cursor:pointer; }
#menu li label:after { display:inline-block; content:'\203A'; padding-left:5px; }
#menu li input:checked ~ label:after { content:''; }

Cela dit, je ne suis pas persuadé que l'affichage que tu as choisi soit le plus pratique, ni ergonomique.

Une liste déroulante des pays aurait été plus pratique, avec :

soit "Etats-Unis" en <optgroup>
soit une 2ème liste déroulante qui s'ouvre en sélectionnant "Etats-Unis".

**apdf1** · 01/01/2018, 14h23

Bonjour jreaux62,

Je te remercie d'avoir répondu et te souhaite une bonne année et surtout bonne santé.
En faite je souhaiterai avoir ceci: https://www.worldtimeserver.com/heure-exacte-EE.aspx la liste qui se trouve à droite, je pense qu'il y a du Jquery.

Sinon je préfère passé par du JavaScript (onclick....).

Max

Afficher les sous menus d'un simple clic sur le menu parent ?

CSS

Discussions similaires

Partager

Partager