Comment modifier un librairie pour développer un menu

**pierrot10** · 08/11/2018, 13h39

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

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

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 :

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

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

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

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

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

Invité · 08/11/2018, 13h56

Bonjour,

tu parles d'une "librairie", sans dire laquelle...

1- Pourquoi utiliser un bout de code que tu ne maitrises pas, pour faire une action qui, finalement, n'est pas bien compliquée :

on clique sur un élément
ça ouvre l'élément suivant

2- Tu utilises jQuery ou pas ?

Si oui, je peux te proposer : https://codepen.io/jreaux62/pen/dPxKKQ

**pierrot10** · 08/11/2018, 14h15

Salut Jreaux.

Merci pour ton lien, c'est très intéressant. Je vais l'étudier ce soir.
C'est cette librairie
https://codyhouse.co/demo/slide-in-panel/index.html
mais j'ai quasiment mis tout le code dans ce poste

Et voilà, ce que j'ai fait jusqu'à présent
http://www.dixlunes.ch/teste2.html (Ne cliquez pas sur les liens, vous serez rediriger ailleurs)
mais c'est que du CSS, en ce qui concerne le menu, une fois, le panneau développer

**pierrot10** · 08/11/2018, 19h49

Bonjour JREAUX,
J'aimerais si tu pouvais me donner un coup de main a adapter ce script, n'étant pas un expert.
J'ai donc essayé ceci et ca marche avec le HTML fourni
https://codepen.io/jreaux62/pen/dPxKKQ
Le truc, c,'est que code HTML reseemble à ceci

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
 
<ul>
    <li class="active">
      <!-- active : menu EN COURS -->
	 <div>
	 <a href="#">A - One for the Money</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">w</i>
		</a>
</div>
      <ul>
        <li>
          <a href="#">A - 1</a>
        </li>
        <li>
		<div>
          <a href="#">A - 2</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">w</i>
		</a>
</div>
          <ul>
            <li>
              <a href="#">A - 2.1</a>
            </li>
            <li>
              <a href="#">A - 2.2</a>
            </li>
            <li>
              <a href="#">A - 2.3</a>
            </li>
            <li>
              <a href="#">A - 2.4</a>
            </li>
            <li>
              <a href="#">A - 2.5</a>
            </li>
            <li>
              <a href="#">A - 2.6</a>
            </li>
          </ul>
        </li>
        <li>
		<div>
          <a href="#">A - 3</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">w</i>
		</a>
</div>
          <ul>
            <li>
			<div>
              <a href="#">A - 3.1</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">w</i>
		</a>
</div>
              <ul>
                <li>
                  <a href="#">A - 3.11</a>
                </li>
                <li>
                  <a href="#">A - 3.12</a>
                </li>
                <li>
                  <a href="#">A - 3.13</a>
                </li>
                <li>
                  <a href="#">A - 3.14</a>
                </li>
                <li>
                  <a href="#">A - 3.15</a>
                </li>
              </ul>
            </li>
            <li>
			<div>
              <a href="#">A - 3.2</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">w</i>
		</a>
</div>
              <ul>
                <li>
                  <a href="#">A - 3.21</a>
                </li>
                <li>
                  <a href="#">A - 3.22</a>
                </li>
                <li>
                  <a href="#">A - 3.23</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">A - 3.3</a>
            </li>
            <li>
              <a href="#">A - 3.4</a>
            </li>
            <li>
              <a href="#">A - 3.5</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">A - 4</a>
        </li>
      </ul>
    </li>
</ul>

Je dois mettre ceci pour les dérouler menu à plusieurs niveaux

Code HTML :

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

1
2
3
4
5
6
7
 
<div>
              <a href="#">A - 3.1</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">w</i>
		</a>
</div>

Donc c'est le deuxième a.exand qui va dérouler menu. le a qui le précède doit ouvrir la page

Code HTML :

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

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">w</i>
		</a>

Donc, pour que le a.exand soit inactif, j'ai modifié le code aisni

Code javascript :

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

1
2
3
4
5
 
 // on désactive les liens des Menus AVEC Sous-Menus (obligatoire pour Tablettes TACTILES / Smartphones)
  $(navMainId + " > nav > ul > li.hasSub > div > a.expand").on("click", function(event) {
    event.preventDefault();
  });

Maintennat pour que le menu enfant de développement, je pense qu'il y a un problème avec la cible de parent()

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
 
 $(navMainId + " > nav > ul > li > div > a.expand").on("click", function(event) {
 
    event.stopPropagation(); /* important */
    $(this)
      .parent()
      .find("li:not(:hover)")
      .removeClass("open");
    $(this).toggleClass("open");
    $(this)
      .parent()
      .find("li:not(:hover) ul")
      .slideUp("fast");
    if ($(this).hasClass("hasSub")) {
      $(this)
        .children("ul")
        .slideToggle("fast");
    }
  });

car li n'est plus parent du a qui va le dévelloper, puis il y a un div et a avant a.exand. J'ai essayé du bricolage en ajoutant des parent() pour remonter jusqu'au li

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
 
 $(navMainId + " > nav > ul > li > div > a.expand").on("click", function(event) {
 
    event.stopPropagation(); /* important */
    $(this)
      .parent().parent().parent() /* Bricolage */
      .find("li:not(:hover)")
      .removeClass("open");
    $(this).toggleClass("open");
    $(this)
      .parent().parent().parent()
      .find("li:not(:hover) ul")
      .slideUp("fast");
    if ($(this).hasClass("hasSub")) {
      $(this)
        .children("ul")
        .slideToggle("fast");
    }
  });

Il y a bien quelque chose qui se passe au niveau du a.span, mais le menu de se développe pas, ce qui ne me surprend pas trop.
Comment puis-je alors facilement remonter au li, en évitant le a et le div qui se trouve entre le li et le a.expand??

Vois-tu?

Merci beaucoup

**Toufik83** · 08/11/2018, 22h07

Envoyé par pierrot10

Comment puis-je alors facilement remonter au li, en évitant le a et le div qui se trouve entre le li et le a.expand??

closest()

**pierrot10** · 09/11/2018, 00h57

Merci beaucoup. Ca marche

J'ai encore deux questions et l'adapation selon mon DOM fonctionnera (j'espère

)

Comment je peux modifer ceci

Code javascript :

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

$("#monmenu > a.expand").on("click", function(event) {..}

pour qu'il ne tienne pas en comptre des éléements entre #monmenu et tous les a.expand?
En fait ceci fonctionne

Code javascript :

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

$("a.expand").on("click", function(event) {..}

Mais admettons, que j'ai plusieurs menu (nav), j'aimerais que l'action se limite que dans le nav#monmenu.

Dernière question, je n'arrive pas à fermer tous les menus, quand je clique sur un menu. Si je clique sur le menu 3, le 1,2 et 4 doivent se fermer. Quand je clique sur le 4, le 1,2,3 doivent se fermer, etc.

Ce que j'ai c'est ceci

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
  $(navMainId + " > a.expand").on("click", function(event) {
    event.stopPropagation(); /* important */
    $(this)
      .closest("div")
      .find("li:not(:hover)")
      .removeClass("open");
    $(this).closest("li").toggleClass("open");
 
    $(this)
      .closest("div")
      .find("li:not(:hover) ul")
      .slideUp("fast");
    if ($(this).closest("li").hasClass("hasSub")) {
      $(this)
        .closest("li")
        .children("ul")
        .slideToggle("fast");
    }
  });

plus précisément ceci

Code javascript :

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

1
2
3
4
5
6
 
$(this)
      .closest("div")
      .find("li:not(:hover)")
      .removeClass("open");
    $(this).closest("li").toggleClass("open");

Quand je clique sur a.expand, il va chercher (.find("li:not(:hover)") ) tous les li qui n'ont pas la souris dessus. Mais dans ce code, il va chercher tous les li qui sont enfants à a.expand, c'est bien ca? Vu qu'il n'y a rien pas, il ne fait rien.

Ce qui serait top, c'est que lorsque je clique su a.expand, il ferme les ul qui sont enfant de li du même niveau, qui ne sont pas hover.

Par exemple ici, si je clique sur le a.expand du niveau A-2, il fermerait le ul du A-1 et le ul de A-3 (s'il y en avait un)

Si dans mon example, il y avait des sous menu au niveau A-2.1, il fermerait uniqument le ul des A-2.2 et A2.3, par exemple.
Voyez-vous?

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
<ul>
        <li>
<div>
          <a href="#">A - 1</a>
      <a href="#">A - 2</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">w</i>
		</a>
</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
        </li>
        <li>
		<div>
          <a href="#">A - 2</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">w</i>
		</a>
</div>
          <ul>
            <li>
              <a href="#">A - 2.1</a>
            </li>
            <li>
              <a href="#">A - 2.2</a>
            </li>
            <li>
              <a href="#">A - 2.3</a>
            </li>
            <li>
              <a href="#">A - 2.4</a>
            </li>
            <li>
              <a href="#">A - 2.5</a>
            </li>
            <li>
              <a href="#">A - 2.6</a>
            </li>
          </ul>
        </li>
</ul>

(Mais la première question est plus importante pour moi)

Merci beaucoup!!

Comment modifier un librairie pour développer un menu

jQuery

Vue hybride

Discussions similaires

Partager

Partager