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>
Discussions par date d’activité
4 discussions
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
Ce qui serait encore plus chic, ce serait que l’on puisse dérouler les sous-sous-sous-rubriques....
Est-ce compliqué ?
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
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
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |