Préliminaires
Le menu proposé est basé sur le script proposé sur le site OnlineTools
Sites exemples :
- site de test de la donation lou-salomé
- Sciences -indus en CPPGE
Principe
Le menu est une liste <ul> <li>.....</li> </ul> associée à la classe pde de la forme suivante :
<ul class="pde">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3_1</a></li>
<li><a href="#">Link 3_2</a>
<ul>
<li><a href="#">Link 3_2_1</a></li>
<li><a href="#">Link 3_2_2</a></li>
<li><a href="#">Link 3_2_3</a></li>
<li><a href="#">Link 3_2_4</a></li>
</ul>
</li>
<li><a href="#">Link 3_3</a></li>
<li><a href="#">Link 3_4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
</ul>Le script associé pde.js (PureDomExplorer) va reconnaître chaque item de la liste possédant une sous liste et lui associer la classe « parent ». Le script va aussi associer les classes « hide » et « show » permettant de rendre visible ou non la sous liste.
Les Boucles
Version rubriques seules
<BOUCLE_exclus(RUBRIQUES) {titre_mot = exclusion }{doublons} ></BOUCLE_exclus>
<ul class="pde">
<BOUCLE_smenu1(RUBRIQUES){racine}{par num titre}{doublons}>
<li>
<a href="#URL_RUBRIQUE" title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero)]</a>
<B_smenu2><ul [class="(#EXPOSE{show,hide})"]>
<BOUCLE_smenu2(RUBRIQUES){id_parent}{par num titre}>
<li><a href="#URL_RUBRIQUE"title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero)]</a>
<BOUCLE_ssmenu(boucle_smenu2)></BOUCLE_ssmenu>
</li>
</BOUCLE_smenu2>
</ul>
</B_smenu2>
</li></BOUCLE_smenu1>
</ul>Les boucles ci-dessus sont des boucles classiques de génération de menu, la seule particularité réside dans la balise #EXPOSE qui va attribuer la classe « hide » ou la classe « show » si la rubrique est la rubrique courante.
Version rubriques + articles
Cette version du menu liste intègre les articles dans le menu et permet d’avoir un plan dépliant du site. Cette version est visible sur le site de lou-salomé
<BOUCLE_exclus(RUBRIQUES) {titre_mot = exclusion }{doublons} ></BOUCLE_exclus>
<ul class="pde">
<BOUCLE_menu-racine(RUBRIQUES){racine}{par num titre}{doublons}>
<li> <a href="#URL_RUBRIQUE" title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero)]</a>
<B_sous-menu>
<ul [class="(#EXPOSE{show,hide})"]>
<BOUCLE_sous-menu(RUBRIQUES){id_parent}{par num titre}{doublons}>
<li class="sousrub"> <a href="#URL_RUBRIQUE"title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero)]</a>
<BOUCLE_recursive(boucle_sous-menu)></BOUCLE_recursive> </li>
</BOUCLE_sous-menu>
<BOUCLE_art1(ARTICLES){id_rubrique}>
<li class="art"><a href="#URL_ARTICLE" title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero|couper{20})]</a></li>
</BOUCLE_art1>
</ul>
</B_sous-menu>
<B_art2>
<ul [class="(#EXPOSE{show,hide})"]>
<BOUCLE_art2(ARTICLES){id_rubrique}>
<li class="art"><a href="#URL_ARTICLE" title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero|couper{20})]</a></li>
</BOUCLE_art2>
</ul>
</B_art2>
<//B_sous-menu>
</li>
</BOUCLE_menu-racine>
</ul>Installation
Copier dans votre répertoire squelettes les trois fichiers du zip et les deux images (minus.gif et plus.gif)
- le squelette menu-pde.html
- la feuille de style à personaliser
- le squelette javascript pde.js.html
Modifier vos squelettes afin d’inclure le menu
- dans rubrique.html et sommaire.html
<INCLURE {fond=menu-pde}{id_rubrique}> - dans sommaire.html et dans tous les squelettes qui n’ont pas de numéro de rubrique
<INCLURE {fond=menu-pde}{id_rubrique=0}> - dans article.html, il faut créer une boucle englobante pour récupérer l’id de la rubrique
<BOUCLE_art-menu(ARTICLES){id_article}> <INCLURE {fond=menu-pde}{id_rubrique}> </BOUCLE_art-menu>
Ajouter dans l’entête l’appel de la feuille de style du menu et du javascript en ajoutant les lignes :
<style type="text/css"> @import '#CHEMIN{pde.css}';
</style>
<script type="text/javascript" src="spip.php?page=pde.js">
</script>On remarquera l’appel du script via la commande spip.php?page=pde.js", le script comportant des balises spip, il est nécessaire d’évaluer ces balises.
Evolutions
- L’évolution à prévoir est de modifier le script afin d’utiliser la librairie Jquery plutot qu’un nouveau script indépendant. N’hésitez pas à proposer cette évolution.
- Mettre le menu en plugin
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 :
|
