Menu déroulant à plusieurs niveaux (CSS+JS)

**Toiine** · 15/04/2015, 15h03

Bonjour,

comme une démonstration vaut mieux qu'un long discours voici un menu déroulant sur un niveau que je souhaite terminer pour avoir plusieurs niveaux de menu :
http://codepen.io/Ell0ne/pen/YPmaRq

Plus précisément, dans le cas de l'exemple donné, je souhaite :
Lorsque je clique sur le sous-menu 2 appartenant au menu A : le contenu de mon sous-menu 2 (2.1, 2.2, 2.3...) apparaisse.

Lorsque je clique sur le sous-menu 3 appartenant au menu A : le contenu de mon sous-menu 3 (3.1, 3.2, 3.3...) apparaisse et le contenu de mon sous-menu 2 (et de tous les autres sous-menus du même niveau) disparaisse si il était affiché, de la même manière qu'il n'est possible d'afficher qu'un seul menu à la fois (A, B, C et D).

Changer la couleur de fond d'un sous-menu si il contient un autre sous-menu (comme 2, 3 ou encore 12). J'ai attribué la classe dropdown-sub1 à ces sous-menus.
Changer la couleur de fond du contenu de mes sous-menus (2.1, 2.2 , ...). Ces "sous-sous-menu" sont de classe in-sub1.

Pour plus tard, ajouter de nouveaux niveaux de menu. Le prochain niveau de sous-menu serait alors de classe dropdown-sub2 qui contiendrait alors des éléments de classe in-sub2
Après quelques essais, je ne suis pas parvenu à attribuer les bonnes propriétés CSS à mes nouvelles classes, ni à effectuer les bonnes manipulations javascript pour le comportement souhaité.

J'espère que c'est assez clair avec l'exemple fourni.

Amicalement.

Invité · 15/04/2015, 15h37

Bonjour,
Et donc... ?

Tu souhaites des encouragements ?
Alors :

c'est cadeau !

**Toiine** · 15/04/2015, 15h45

Merci pour la précieuse et utile aide.

**Bovino** · 15/04/2015, 16h14

Donc si je résume.
Tu as récupéré le code pour un menu.
Tu voudrais que ce menu ai plusieurs niveaux.
Mais le code récupéré ne gère pas ça.
Donc c'est à nous de nous dépatouiller avec tes 350 lignes de code CSS pour te le faire.

J'ai bon ?

**Toiine** · 15/04/2015, 16h20

Je souhaitais également que le menu n'affiche qu'un seul menu à la fois. Ca n'était pas géré non plus et je suis parvenu à modifier le javascript pour que ce soit géré.
La c'est une fonctionnalité que j'arrive pas à mettre en place seul donc je demande de l'aide.
Mais si c'est si choquant, autant clore le sujet maintenant et le supprimer.

**NoSmoking** · 15/04/2015, 18h49

Bonjour,
tu es en période de chance, sujet approchant traité il n'y a pas si longtemeps que cela, Menu Accordion en CSS, avec un exemple à la clé.

Perso je n'aime pas le concept de multi-niveaux sur ce type de menu...

Invité · 15/04/2015, 22h29

Yop,
je me suis amusé aussi à faire mon propre menu, multi-niveaux :

http://codepen.io/jreaux62/pen/dPxKKQ

Enjoy !

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
<nav id="navMain">
    <ul>
        <li>
            <a href="#">A</a>
            <ul>
                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                    <ul>
                        <li>
                            <a href="#">2.1</a>
                        </li>
                        <li>
                            <a href="#">2.2</a>
                        </li>
                        <li>
                            <a href="#">2.3</a>
                        </li>
                        <li>
                            <a href="#">2.4</a>
                        </li>
                        <li>
                            <a href="#">2.5</a>
                        </li>
                        <li>
                            <a href="#">2.6</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">3</a>
                    <ul>
                        <li>
                            <a href="#">3.1</a>
                            <ul>
                                <li>
                                    <a href="#">3.11</a>
                                </li>
                                <li>
                                    <a href="#">3.12</a>
                                </li>
                                <li>
                                    <a href="#">3.13</a>
                              </li>
                                <li>
                                    <a href="#">3.14</a>
                                </li>
                                <li>
                                    <a href="#">3.15</a>
                              </li>
                            </ul>
                       </li>
                        <li>
                            <a href="#">3.2</a>
                             <ul>
                                <li>
                                    <a href="#">3.21</a>
                                </li>
                                <li>
                                    <a href="#">3.22</a>
                                </li>
                                <li>
                                    <a href="#">3.23</a>
                              </li>
                             </ul>
                       </li>
                        <li>
                            <a href="#">3.3</a>
                        </li>
                        <li>
                            <a href="#">3.4</a>
                        </li>
                        <li>
                            <a href="#">3.5</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">B</a>
            <ul>
                <li>
                    <a href="#">5</a>
                </li>
                <li>
                    <a href="#">6</a>
                </li>
                <li>
                    <a href="#">7</a>
                </li>
                <li>
                    <a href="#">8</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">C</a>
            <ul>
                <li>
                    <a href="#">9</a>
                </li>
                <li>
                    <a href="#">10</a>
                </li>
                <li>
                    <a href="#">11</a>
                </li>
                <li>
                <li>
                    <a href="#">12</a>
                    <ul>
                        <li>
                            <a href="#">12.1</a>
                        </li>
                        <li>
                            <a href="#">12.2</a>
                        </li>
                        <li>
                            <a href="#">12.3</a>
                        </li>
                        <li>
                            <a href="#">12.4</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">D</a>
            <ul>
                <li>
                    <a href="#">13</a>
                </li>
                <li>
                    <a href="#">14</a>
                </li>
                <li>
                    <a href="#">15</a>
                </li>
                <li>
                    <a href="#">16</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

CSS :

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
80
81
82
83
84
85
86
#navMain { 
  position:relative; 
  width:500px; 
  margin:0 auto; 
}
 
#navMain ul, #navMain li, #navMain a {
  position:relative; 
  padding:0; 
  margin:0; 
  border:0; text-decoration:none; 
}
 
#navMain ul li {
  display:block; 
} 
#navMain ul li a {
  display:block; 
  color:#fff;
  padding:10px 10px;
  position: relative;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#navMain > ul > li > a {
    background: #2980b9;
    box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
}
#navMain ul ul > li > a { 
  padding-left:20px;
}
#navMain ul ul > li { 
    background: #333;
    box-shadow: 0 1px 0 #444 inset, 0 -1px 0 #222 inset;
}
#navMain ul ul ul > li > a { 
  padding-left:40px;
}
#navMain ul ul ul > li { 
    background: #555;
    box-shadow: 0 1px 0 #666 inset, 0 -1px 0 #444 inset;
}
#navMain ul ul ul ul > li > a { 
  padding-left:60px;
}
#navMain ul ul ul ul > li { 
    background: #888;
    box-shadow: 0 1px 0 #999 inset, 0 -1px 0 #777 inset;
}
#navMain ul li:hover {
    background: #20638f;
    box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
}
#navMain li.hasChildren > ul {
  display:none;
}
 
/* ------------------------------- */
.hasChildren:after {
    position: absolute;
    content: '\25BC';
    display: block;
    font-size: 0.7em;
    color: #fff;
    top: 14px;
    right: 10px;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}
.hasChildren.open:after {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}
 
/* ------------------------------- */

jQuery :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// ------------------------------------------------
// 	jquery.dropdown.js	(depends on: jquery.hoverIntent.js)
// ------------------------------------------------
$.fn.dropdown = function(options) 
{
	var defaults = {};
	var opts = $.extend(defaults, options);
	// Apply class=hasChildren on those items with children
	this.each(function(){
		$(this).find('li').each(function() 
		{
			if( $(this).find('ul').length > 0) 
			{
				$(this).addClass('hasChildren');
			}
		});
	});
	return this;
};
// ------------------------------------------------
// MENU MAIN
$(function(){
	var navMainId = '#navMain';
	// Calling the jquery dropdown
	$(navMainId).dropdown();
	// -------------------
		// ouverture/fermeture sous-menu (click/touch)
		$(navMainId+' ul > li').on( 'click', function(event) 
    {
      $(this).parent().find('li:not(:hover)').removeClass('open');
      $(this).parent().find('li:not(:hover) ul').slideUp('fast');
      if( $(this).hasClass('hasChildren') )
      {
        $(this).children('ul').slideToggle('fast');
      }
      if( $(this).hasClass('open') )
      {
        $(this).removeClass('open');
      } else {
        $(this).addClass('open');
      }
      event.stopPropagation(); /* important */
		});
		// IMPORTANT : on supprime les liens des Menus AVEC Sous-Menus
		$(navMainId+' > ul > li.hasChildren > a').attr('href','javascript:void(0);');
	// -------------------
		$(navMainId+' #navMainClose').on( 'click', function() 
    {
      $(navMainId+' ul ul').slideUp('fast');
		});
});

**Bovino** · 16/04/2015, 08h03

Code javascript :

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

1
2
3
4
$.fn.dropdown = function(options) {
	// ...
	return this;
};

Attention Jérôme. Un plugin jQuery doit toujours renvoyer l'objet jQuery en cours pour permettre le chainage.

Invité · 16/04/2015, 08h48

@Bovino,
c'est la seule partie du code que je n'ai pas écrite moi-même !

[EDIT] Edité

**Toiine** · 16/04/2015, 11h50

Merci.
J'avais commencé à voir du coté d'Angular mais JQuery fait très bien l'affaire.
Je classe donc le sujet en résolu.

Menu déroulant à plusieurs niveaux (CSS+JS)

CSS

Discussions similaires

Partager

Partager