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>
Aucune discussion
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 : |