Accueil du site > Navigation > Menus réactifs > Menu rétractable

Menu rétractable

10 mars 2005 – par michael – 13

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

C’est un menu que j’ai trouvé sur le site www.dynamicdrive.com et que j’ai adapté pour SPIP.

Il s’agit ici de lister et de présenter l’ensemble des articles de chaque rubrique « racine » via un menu rétractable (ou « Switch Menu »).

Testé sur les navigateurs : IE6 et Mozilla Firefox 1.0

Pour voir le fonctionnement du menu : exemple

1e étape : Coller le code suivant entre les balises <head></head> de votre page HTML

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

</script>

Le code compris entre les balises <style></style> permet de personnaliser le menu (taille des cellules :"width", couleur :"background-color"...etc).

2e étape : Coller le code suivant entre les balises <body></body> de votre page HTML :

<div id="masterdiv">
<!-- Tous les articles par grandes rubriques-->

<BOUCLE_rub(RUBRIQUES) {racine}>
	<div class="menutitle" onclick="SwitchMenu('sub#ID_RUBRIQUE')">#TITRE</div>
	<span class="submenu" id="sub#ID_RUBRIQUE">
		
	<BOUCLE_art(ARTICLES){id_rubrique}>
		[<a href="#URL_ARTICLE">(#TITRE)</a><br>]
	</BOUCLE_art>

	<BOUCLE_rub2(RUBRIQUES) {id_parent}>

		<BOUCLE_recursive(BOUCLE_rub2)></BOUCLE_recursive>
	
		<BOUCLE_art2(ARTICLES){id_rubrique}>
		[<a href="#URL_ARTICLE">(#TITRE)</a><br>]
		</BOUCLE_art2>
			
	</BOUCLE_rub2>

	</span>

</BOUCLE_rub>

Explications du code du menu :

1/Le code qui construit le menu compte tenu des rubriques à la racine du site :

<div id="masterdiv">

<BOUCLE_rub(RUBRIQUES) {racine}>

   <div class="menutitle" onclick="SwitchMenu('sub#ID_RUBRIQUE')">#TITRE</div>

        <span class="submenu" id="sub#ID_RUBRIQUE">

Toutes les rubriques « racine » seront affichées même si elles ne contiennent aucun article (ce qui n’est en principe probable).

Attention de ne pas oublier de faire précéder la boucle par le code <div id="masterdiv"> qui appelle le script de construction du menu.

2/Si la rubrique racine ne présente pas de sous-rubriques, la boucle suivante appelle ses articles correspondants :

<BOUCLE_art(ARTICLES){id_rubrique}>

        [<a href="#URL_ARTICLE">(#TITRE)</a><br>]

</BOUCLE_art>

3/La boucles qui appelle l’ensemble des articles des sous-rubriques éventuelles :

<BOUCLE_rub2(RUBRIQUES) {id_parent}>

4/La boucle récursive qui permet de descendre vers des sous-rubriques de second niveau ou plus :

<BOUCLE_recursive(BOUCLE_rub2)></BOUCLE_recursive>

5/La boucle qui récupère l’ensemble des articles des sous-rubriques :

<BOUCLE_art2(ARTICLES){id_rubrique}>

[<a href="#URL_ARTICLE">(#TITRE)</a><br>]

</BOUCLE_art2>

P.-S.

Avertissement : ce script est publié ici à titre d’exemple, afin de montrer ce qu’il est possible de faire avec SPIP. Toutefois il n’est pas libre et son utilisation est soumise à autorisation de DynamicDrive

Vos commentaires

# Le 31 octobre 2005 à 16:59, par Josh En réponse à : Transformer l’id menu_deroulant en class

Comment transformer le fichier javascript pour que l’id menu_deroulant devienne une classe : en effet dans une boucle la validation Xhtml est refusée parce que l’id est attribué plusieurs fois...
- # ^ Le 9 novembre 2006 à 03:06, par dionysos En réponse à : Transformer l’id menu_deroulant en class
  ce menu fonctionne très bien parcontre n’y connaisant pas grand chose en syntaxe de boucle j’ai des difficultés à l’adapté à mon site (squelette recit fp) .... j’appel le menuen incluant dans mon fichier sommaire un fichier inc_colgauche :
  
  <:accueil_site :>
  
  (#TITRE
  
  Ce menu exclu les rubriques ayant pour mot clé _ExclusDuMenu (ne les affiche pas) et supprime les numéro des rubriques ... Comment adapter le scripts du menu déroulant à mon script s’il vous plait ?
  
  merci de votre contribution
- # ^ Le 9 novembre 2006 à 03:42, par dionysos En réponse à : Transformer l’id menu_deroulant en class
  
  Pour suprimmer le numero j’ai résolu le problème ... par contre je n’arrive toujours pas à faire fonctionner la gestion du menu par mot clé (pour exclure des rubriques et articles du menu)...
  de plus comment obtenir un lien vers la page d’acueil au dessus du menu auquel s’applique le même sstyle que le reste du menu ?
- # ^ Le 9 novembre 2006 à 03:57, par dionysos En réponse à : Transformer l’id menu_deroulant en class
  
  et bien j’ai retrouvé la syntaxe pour gérer les mots clé .. ça marche ... me reste plus que le dernier problème .... celui du lien vers l’accueil
- # ^ Le 4 juin 2008 à 11:30, par toluss En réponse à : Transformer l’id menu_deroulant en class
  
  Bonjour,
  Pourriez-vous me donner le code que vous avez utilisé pour récit. Je galère. Merci
Répondre à ce message
# Le 15 mars 2005 à 10:29, par ? En réponse à : > Menu rétractable

Ce qui serait encore plus chic, ce serait que l’on puisse dérouler les sous-sous-sous-rubriques....
Est-ce compliqué ?
- # ^ Le 15 mars 2005 à 19:08, par michaël En réponse à : > > Menu rétractable
  
  Salut,
  
  Je t’avoue que je n’ai pas essayé ! (mais je t’encourage à le faire car une contrib est aussi destinée à évoluer).
  
  Ta question revient en fait à obtenir un menu de navigation complet.
  
  Tu peux donc aussi te baser sur le squelette du site de spip-contrib. Son menu de navigation est aussi un menu rétractable.
  
  J’espère t’avoir éclairé.
  
  Michaël
- # ^ Le 28 juin 2005 à 18:06, par iaka En réponse à : > Menu rétractable
  
  Un début de solution avec SlideMenu 2.0 de DHTMLCentral.com
  j’ai modifier uniquemant la partie Menu
  
  //Menu 1
  
  < BOUCLE_rub_press ( RUBRIQUES ) id_rubrique = xx >
  _ _ < BOUCLE_sous_rub ( RUBRIQUES ) id_parent par titre inverse >
  _ _ _ _ _ slideMenu.makeMenu(’top’,’[(#TITRE|couper15)]’)
  _ _ _ _ _ _ _ _ < BOUCLE_art_press ( ARTICLES ) id_rubrique par date inverse doublons >
  _ _ _ _ _ _ _ _ _ _ _ slideMenu.makeMenu(’sub’,’ (#DATE’,’press.php3 ?id_article=#ID_ARTICLE’)
  _ _ _ _ _ _ _ _ _ _ _ slideMenu.makeMenu(’sub’,’[(#TITRE|couper35)]’,’press.php3 ?id_article=#ID_ARTICLE’)
  _ _ _ _ _ _ _ _ < /BOUCLE_art_press >
  _ _ < /BOUCLE_sous_rub >
  < /BOUCLE_rub_press >
  slideMenu.init()
- # ^ Le 26 octobre 2005 à 21:25, par ? En réponse à : > Menu rétractable
  
  Bonsoir,
  
  C’est exactement ce que je cherche (slidemenu avec spip) mais malheureusement je n’arrive pas à insérer le code proposé ci-dessus dans le fichier d’origine et mes pages sommaire.html, rubrique.html, article.html.
  
  Pourriez-vous communiquer l’adresse des pages source du site de tir du Creusot qui contiennent le script menu dans le code spip ?
  
  Très cordialement
  JFC
- # ^ Le 13 décembre 2005 à 19:23, par iaka En réponse à : > Menu rétractable
  
  pages source du site de tir du Creusot dispo sur demande via
  la page :
  http://www.societe-de-tir-du-creusot.org/iaka.php3?id_article=25
Répondre à ce message
# Le 18 octobre 2005 à 18:14, par Josh En réponse à : Menu rétractable

Et comment faire pour que le menu se rétracte quand on clique sur un autre lien pour ne pas laisser la possibilité de dérouler tous les menus en même temps (très utile pour un site en CSS) ???
- # ^ Le 28 octobre 2005 à 09:36, par Josh En réponse à : Menu rétractable
  
  Je précise mon idée :
  
  faire en sorte qu’en cliquant sur deuxième lien, le menu rétracte le premier menu cliqué pour ne pas avoir un scroll de 3 kilomètres si les sous-menus sont long avec deux ou trois menus d’ouvert en même temps...
Répondre à ce message
# Le 28 octobre 2005 à 09:34, par Josh En réponse à : Accessibilité du menu

Comment rendre ce menu accessible pour les personnes n’utilisant pas ou n’ayant pas de souris (je cherche à obtenir une priorité 2 d’accessibilité sur mon site)

Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message

Ajouter un document

gif, jpg, png

SPIP-Contrib

Menu rétractable

Explications du code du menu :

P.-S.

Rubriques

Derniers commentaires

Téléchargement(s)

Menus réactifs

Vos commentaires

Répondre à cet article

Ça discute par ici

Formulaire de contact libre

Plugin Mot de Passe Compliqué

Navigation AJAX

Plugin Vidéo(s)

Plugin SPIPAL

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN