Discussion :

[Cedbazoom]

Bonjour Tout le monde,

Voilà je suis en train de créer un menu en accordéon avec 2 niveaux qui s'ouvre et se ferme quand je clique dessus. Jusque là ça peut aller.

De plus un style est appliqué au menu spécifique à la page en cours.

Mon soucis est que lorsque je clique sur un lien de mon menu et que j'atteins la page du lien, mon menu se ferme entièrement. Voir l'exemple ci-dessous :


J'aimerais qu'il garde ouvert la section ou se trouve mon lien de la page en cours comme dans l'exemple ci-dessous :


Voici le script utilisé pour mon menu :

Code :

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
<script>
(function( $ ) {
$( document ).ready(function() {
  $('#cssmenu > ul > li > a').click(function() {
    $('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active');	
    var checkElement = $(this).next(); 
 
	if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      $(this).closest('li').removeClass('active');
      checkElement.slideUp('normal');
    }
 
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
      $('#cssmenu ul ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }
    if($(this).closest('li').find('ul').children().length == 0) {
      return true;
    } else {
      return false;	
    }		
  });
});
} )( jQuery );
</script>

Si vous pouvez m'aider et si vous avez une petit idée, ça serait super.

Merci d'avance en cas.

[Invité]

Bonjour,

1- avec le code HTML associé, ce serait mieux...

2-

...lorsque ... j'atteins la page du lien, mon menu se ferme entièrement...

Comment est appliquée la classe "active" au "bon élément" sur chaque page ?

[Cedbazoom]

Autant pour moi je donne toute les sources :

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
<div id="cssmenu" class="menuCampaign" SCROLLING="yes">
<ul>
   <li class='has-sub'><a href='#'><span>&Eacute;lectrom&eacute;nager</span></a>
     <ul>
            <li><a href="">Pr&eacute;parer et entretenir son jardin</a></li>
            <li><a href="">Guide d'achat tondeuse</a></li>
            <li class="last"><a href="">Guide d'achat tronçonneuse</a></li>
      </ul>
  </li>
   <li class='has-sub'><a href='#'><span>Jardin</span></a>
      <ul>
            <li><a href="">Pr&eacute;parer et entretenir son jardin</a></li>
            <li><a href="">Guide d'achat tondeuse</a></li>
            <li class="last"><a href="">Guide d'achat tronçonneuse</a></li>
      </ul>
   </li>
 
</ul>
</div>

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
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 242px;
  background: #fff;
  padding: 3px;
 
}
#cssmenu > ul > li {
  margin: 0 0 2px 0;
  border-bottom:1px solid #ddd;
}
#cssmenu > ul > li:last-child {
  margin: 0;
}
#cssmenu > ul > li > a {
  font-size: 15px;
  display: block;
  color: #333;
}
#cssmenu > ul > li > a > span {
  display: block;
  padding: 6px 10px;
  font-weight: bold;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #97be10;
}
#cssmenu > ul > li.active > a span {
  border-bottom:1px solid #ddd;
}
#cssmenu > ul > li.has-sub > a span {
  background: url(http://pmcdn.staticpmrk.com/visuels/2015-03-18_GuideDachat/images/flecheMenu3.png) 98% center no-repeat;
  background-position-y:10px;
}
#cssmenu > ul > li.has-sub.active > a span {
  background: url(http://pmcdn.staticpmrk.com/visuels/2015-03-18_GuideDachat/images/flecheMenu3.png) 98% center no-repeat;
  background-position-y:-10px;
}
/* Sub menu */
#cssmenu ul ul {
  padding: 5px 12px;
  display: none;
}
#cssmenu ul ul li {
  padding: 5px 0;
  border-bottom:1px solid #eee;
}
#cssmenu ul ul a {
  display: block;
  color: #595959;
  font-size: 13px;
  font-weight: bold;
}
 
#cssmenu ul ul a:hover {
  color: #79980d;
}

[Invité]

Comment est appliquée la classe "active" au "bon élément" sur chaque page ?

Tu n'as pas répondu à la question.

1- Il faut appliquer la classe active au <li> du menu principal et du sous-menu de la page en cours.
2- Il faut l'"activer" en JS au "chargement de la page".

[Cedbazoom]

Désolé, en effet c'est aussi une de mes recherches, je l'ai mal exprimé dans la discussion.
En attendant je rajoutais juste une class manuellement pour simuler une sélection.
J'ai vue qu'on pouvait lire une page active grace à :

Code :

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

<?php var_dump ($_SERVER); ?>

Mais je pensais le voir dans un second temps.

Mais peut-être je me trompe et qu'il faut tout faire en même temps pour ce que je souhaite faire.

En tout cas merci de m'accorder du temps

[Invité]

Forcément.
Si tu ne mets pas les classes "active" au chargement de la page, c'est normal que le menu reste fermé.

Il faut en effet comparer (en PHP) l'URL de la "page en cours" à l'URL du lien.



Sinon, j'ai fait ce code : https://codepen.io/jreaux62/pen/dZoxKQ

[Cedbazoom]

Merci, je vais aller voir tout ça.