Menu à trois niveau

[Ferguss0N]

Bonjour à tous,

Me voilà devant un problème assez casse-bonbon si vous permettez l'expression : je cherche à faire un menu à 3 niveau sous spip (ce qui est fait) mais je souhaite également que lorsque que l'on clique dans un article du menu, ledit menu reste ouverte avec les sous catégories cliquées.

Je suis un novice en javascript et donc j'ai beaucoup de mal à réaliser le script pour que le menu ne se replie pas.

J'ai écumé pas mal de forum en vain...

Voici ma boucle spip :

	<script src="jquery.collapsor.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$('ul a').collapsor();
		$('dl strong').collapsor({sublevelElement:'dl', speed: 500});
	});
</script>

<ul id="navigation">
	<BOUCLE_M4(RUBRIQUES){id_rubrique=4}{par titre}>
	#SET{rub,(#ENV{cacher_article}|?{6666,#ID_RUBRIQUE})}
	   <li class="navigation">
		  <a href="#menu_1"><strong>[(#TITRE|supprimer_numero)]</strong></a>
		<ul>
			#SET{rub,(#ENV{cacher_article}|?{6666,#ID_RUBRIQUE})}
					   <BOUCLE_ss_rubrique4(RUBRIQUES){id_parent}{par num titre}>
			   <li class="subMenu" >
			<a href="#menu_1_2">[(#TITRE|supprimer_numero)]</a>
				<ul>
				<BOUCLE_articlerub4 (ARTICLES){id_rubrique}{par num titre}>
					<li class="subArticle">
					<i>- <a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></i>
						</li>
				</BOUCLE_articlerub4>
				 </ul>
		</li>
		</BOUCLE_ss_rubrique4>
		</ul>
	</li>
	</BOUCLE_M4>
</ul>

et le javascript :

(function($) {
$.fn.collapsor = function(settings) { 
// override default settings
settings = $.extend({}, $.fn.collapsor.defaults, settings);
var triggers = this;
// for each element
return this.each(function() {
	// occult the collapsing elements
	$(this).find('+ ' + settings.sublevelElement).hide(settings.closeClass);
	//show the opened
	if($(this).hasClass(settings.openClass)){
		$(this).find('+ ' + settings.sublevelElement).show();
	}
	// event handling
  $(this).click(function() {
		// if the new active have sublevels
		if ($(this).next().is(settings.sublevelElement)){
			// blur and add the open class to the clicked
			$(this).blur().toggleClass(settings.openClass);
			// close others
			if (settings.closeOthers == true) {
			  $(this).parent().parent().children().find('.'+settings.openClass).not(this).removeClass(settings.openClass).next().animate({height:'toggle', opacity:'toggle'}, settings.speed, settings.easing);
			}
			// toggle the clicked
			$(this).next().animate({height:'toggle', opacity:'toggle'}, settings.speed, settings.easing);
			return false;
		}
   });
});
};
// default settings
$.fn.collapsor.defaults = {
openClass:'open',
sublevelElement: 'ul',
closeOthers: false,
speed: 500,
easing: 'swing'
};
})(jQuery);

Aidez moi s'il vous plait ! Je vous en serait reconnaissant ! Merci

[Shtong]

Ca fait un sacré paquet de temps que j'ai pas touché à spip mais ça devrait ressembler à quelque chose comme ça : dans les liens de tes menus (à tous les niveaux), ajoute une classe pour dire explicitement si tu veux que l'item soit ouvert ou fermé par défaut :

<a href="#menu_1_2"[ class="(#EXPOSE{open})"]>

Références :

La doc du plugin collapsor

La doc SPIP sur la balise #EXPOSE

[Ferguss0N]

Ca fait un sacré paquet de temps que j'ai pas touché à spip mais ça devrait ressembler à quelque chose comme ça : dans les liens de tes menus (à tous les niveaux), ajoute une classe pour dire explicitement si tu veux que l'item soit ouvert ou fermé par défaut :

<a href="#menu_1_2"[ class="(#EXPOSE{open})"]>

Références :

La doc du plugin collapsor

La doc SPIP sur la balise #EXPOSE

Je ne veux pas que ça soit ouvert par défaut mais seulement après le clic dans un article par ex. Mais merci du conseil je vais fouiller de ce coté !

[Ferguss0N]

J'ai essayé avec #EXPOSE mais ça ne fonctionne pas malheureusement... je tente autrement et je vous tiens au courant !

Etant donné que la page se recharge complètement le menu se remet à zéro... je sèche ! HELP

[Shtong]

Dans ce cas... je n'ai pas compris la question et il vaudrait mieux que tu la reformules :)

[Aoren]

le menu doit apparaitre après que "popol" ai cliqué sur un lien

ensuite le menu reste tant que "popol" n'a pas quitté l'article en question.

Remplace "popol" par qui tu veux

[Ferguss0N]

Dans ce cas... je n'ai pas compris la question et il vaudrait mieux que tu la reformules :)

En fait cela ne s'applique pas forcément à spip, mais à un menu basique.

Je souhaite que le menu reste ouvert lorsque je clic dans un liens du menu (qui amène vers une nouvelle page donc ce qui fait recharger la page).

Au départ on a :

MENU (qui est non déployé)

Après clic dans la navigation on a :

MENU

SOUS-MENU

ARTICLE DU SOUS-MENU

Après clic sur ARTICLE DU SOUS-MENU on doit avoir absoluement :

MENU

SOUS-MENU

ARTICLE DU SOUS-MENU

C'est pour ne pas perdre la navigation, car sinon cela implique de recliquer sur le menu à chaque fois étant donné qu'il se remet à zéro...

[Shtong]

Ok donc j'avais bien compris ^^

Peux-tu vérifier que les liens qui doivent rester ouverts ont bien la classe open après avoir ajouté le petit truc que je t'ai dit plus haut, car c'est ça qui dit à collapsor de garder l'élément ouvert.

[Ferguss0N]

La solution est le PHP avec un js de type "faire voir après rechargement" je suis en train de travailler dessus avec un ami beaucoup plus calé que moi en dév...

Je mettrai le script une fois terminé

[Shtong]

Ouais enfin faut pas réinventer la roue hein... ton script de base vérifie déjà si les liens contiennent la classe open pour ne pas les fermer au démarrage de la page... pas de raison pour que ça ne fonctionne pas !