Comment modifier un librairie pour développer un menu
Bonjour à tous,
Je fabrique un petit menu déroulant à partir d'un livraire existante qui semble etre bien simple.
Cette librairie va juste ouvrir un panel, de droite.
Dedans j'ai mis un menu qui ressemble à ceci
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
|
<nav class="flypanels-treemenu" role="navigation" aria-label="Main navigation">
<ul class="outerClass"><li class="first level1">
<div>
<a href="http://www.dixlunes.ch/" class="link" title="Accueil" >accueil</a>
</div>
</li>
<li class="haschildren" role="treeitem" aria-expanded="false">
<div class="link">
<a href="maison-de-naissances/" title="Maison de naissances" class="link" >maison de naissances
</a>
<a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
<i class="fa icon" aria-hidden="true"></i>
</a>
</div>
<ul role="group" aria-hidden="true" hidden>
<li>
<div>
<a href="maison-de-naissances/quelques-photos.html" class="link" title="Quelques photos" >quelques photos</a>
</div>
</li>
<li>
<div>
<a href="maison-de-naissances/particularités.html" class="link" title="Particularités" >particularités</a>
</div>
</li>
<li>
<div>
<a href="maison-de-naissances/coûts.html" class="link" title="Coûts" >coûts</a>
</div>
</li>
<li>
<div>
<a href="maison-de-naissances/naissances.html" class="link" title="Naissances" >naissances</a>
</div>
</li>
</ul>
</li>
</ul>
</nav> |
J'attire votre attention sur
Code:
1
2
3
4
|
<a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
<i class="fa icon" aria-hidden="true"></i>
</a> |
Quand on clique dessus, il developpe le UL qui suit, soit:
Code:
<ul role="group" aria-hidden="true" hidden>...</ul>
Alors premiere question qui va surement être remplacé par la deuxième: Comment faire ce script qui va développer uniquement le ul avec le role group, qui suit, et pas les autres.
Mais si je veiens à poster ce message, c'est parce que j'aimerais ajouter ces modifications à la librairie existante, qui est très courte.
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
|
(function(){
// Slide In Panel - by CodyHouse.co
var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
if( panelTriggers.length > 0 ) {
for(var i = 0; i < panelTriggers.length; i++) {
(function(i){
var panelClass = 'js-cd-panel-'+panelTriggers[i].getAttribute('data-panel'),
panel = document.getElementsByClassName(panelClass)[0];
// open panel when clicking on trigger btn
panelTriggers[i].addEventListener('click', function(event){
event.preventDefault();
addClass(panel, 'cd-panel--is-visible');
});
//close panel when clicking on 'x' or outside the panel
panel.addEventListener('click', function(event){
if( hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) {
event.preventDefault();
removeClass(panel, 'cd-panel--is-visible');
}
});
})(i);
}
}
//class manipulations - needed if classList is not supported
//https://jaketrent.com/post/addremove-classes-raw-javascript/
function hasClass(el, className) {
if (el.classList) return el.classList.contains(className);
else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
function addClass(el, className) {
if (el.classList) el.classList.add(className);
else if (!hasClass(el, className)) el.className += " " + className;
}
function removeClass(el, className) {
if (el.classList) el.classList.remove(className);
else if (hasClass(el, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
el.className=el.className.replace(reg, ' ');
}
}
})(); |
Je ne comprends pas pourquoi, il fait un for, ici
Code:
1
2
|
for(var i = 0; i < panelTriggers.length; i++) { |
s'il n'y en a qu'un.
Peut-etre, s'il y avait deux panneaux, un a gauche et un a droite?
Mais dans ce cas, il actionnerait les deux panneau??
Bref, je ne vois pas comment ajouter un bout de code, pour développer un ul avec le role 'group' en cliquant sur le lien avec la class 'expand' qui à pour parent un li avec la class 'haschildren'.
Je me demandais si ajouter ceci, avec un truc du genre
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| panel.addEventListener('click', function(event){
if( hasClass(event.target, 'expand')) {
event.preventDefault();
/*
Séelctionner ici le premier ul avec le role 'group', et le développer
/*
// On ajoute la class qui le garde ouvert
addClass(panel, 'cd-menu--is-open');
/*
Ici une condition pour vérifier si la class 'cd-menu--is-open' existe, sioui on la supprime
removeClass(panel, 'cd-menu--is-open');
et le sous-menu se referme.
*/
}
}); |
Merci pour vos lumières et de me mettre sur la bonne voie.
Bonne jounrée
