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

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.

Bonjour,
Et donc... ?

Tu souhaites des encouragements ?
Alors :
:lahola::lahola:

c'est cadeau !

Merci pour la précieuse et utile aide.

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 ? :whistle:

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.

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

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

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

Enjoy !

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

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:

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');
		});
});

Code:

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

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

[EDIT] Edité ;)

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.