Menu rétractable

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

menu

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>

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

Dernière modification de cette page le 6 décembre 2006

Discussion

4 discussions

  • 4

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

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

      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

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

    • 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

    • Bonjour,
      Pourriez-vous me donner le code que vous avez utilisé pour récit. Je galère. Merci

    Répondre à ce message

  • 4

    Ce qui serait encore plus chic, ce serait que l’on puisse dérouler les sous-sous-sous-rubriques....
    Est-ce compliqué ?

    • michaël

      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

    • 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()

    • 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

    • 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

  • 1

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

    • 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

  • 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

Ajouter un commentaire

Qui êtes-vous ?
  • [Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom