Principe
Voici donc une boucle pour afficher un menu en fonction du contexte de la page.
La boucle affiche, dans des listes imbriquées représentant la hiérarchie du site :
- les rubriques à la racine,
- les rubriques parentes de la rubrique actuelle,
- les rubriques soeurs de la rubrique actuelle,
- les rubriques filles de la rubrique actuelle.
Tout cela quelque soit le niveau de la rubrique actuelle et sans javascript.
Comme cela, on dirait que ça fait beaucoup, mais en fait, c’est un menu comme on l’attend pour savoir où on est et naviguer localement autour de la rubrique où l’on se trouve.
Exemple
Par exemple, on pourra voir un menu comme cela :
- Research
- Teaching
- Software
si on est à la racine du site.
Puis, quand on descend dans une des sous rubriques, on pourra voir, par exemple :
- Research
- Publications
- Book Review
- Technical Report & Theses
- Teaching
- Software
Utilisation
- Télécharger l’archive,
- copier les deux fichiers dans votre répertoire squelettes,
- faite un inclure, en passant l’id de la rubrique actuelle [1], où vous voulez dans vos squelettes :
<INCLURE(menu.php3) {id_rubrique}>
Styles
Le menu sort simplement des listes imbriquées dans une div. La div a comme id menu
et le ul « racine » l’id sections
.
La rubrique courante aura comme id current
pour pouvoir être exposée.
On peut donc adopter un style très simple du genre :
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style-type: none;
}
#menu a.current {
font-weight: bold;
}
#menu * li ul {
margin-left: 1em;
}
Comment ça marche ?
Voici quelques explications sur le fonctionnement de cette boucle. On va donc commencer par le code :
<div id="menu">
<B_menu>
<ul id="sections">
<BOUCLE_menu(RUBRIQUES) {par num titre}{racine}>
<BOUCLE_current(RUBRIQUES) {id_rubrique=#ENV{id_rubrique}} {id_secteur}>
<BOUCLE_hier(HIERARCHIE) {id_rubrique}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a><ul>
</BOUCLE_hier>
<BOUCLE_sister_before(RUBRIQUES) {meme_parent} {par num titre} {titre<=#TITRE} {exclus}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sister_before>
</B_hier>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF" [class="(#EXPOSE{current})"]>[(#TITRE|supprimer_numero)]</a>
<B_sub_rub>
<ul>
<BOUCLE_sub_rub(RUBRIQUES) {id_parent}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sub_rub>
</ul>
</B_sub_rub>
</li>
<B_hier_close>
<BOUCLE_sister_after(RUBRIQUES) {meme_parent} {par num titre} {titre>#TITRE} {exclus}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sister_after>
<BOUCLE_hier_close(HIERARCHIE) {id_rubrique}>
</ul></li>
</BOUCLE_hier_close>
</BOUCLE_current>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF" [class="(#EXPOSE{current})"]>[(#TITRE|supprimer_numero)]</a></li>
<//B_current>
</BOUCLE_menu>
</ul>
</B_menu>
</div>
Pour commencer, la boucle parcourt toutes les rubriques à la racine du site :
<BOUCLE_menu(RUBRIQUES) {par num titre}{racine}>
Pour chacune de ces rubriques, on regarde si la rubrique actuelle (celle spécifiée par la variable passée à l’inclure et retournée par #ENV{id_rubrique}
) est dans ce secteur :
<BOUCLE_current(RUBRIQUES) {id_rubrique=#ENV{id_rubrique}} {id_secteur}>
si c’est le cas, alors cette boucle aura choisi la rubrique courante. Il nous faut maintenant afficher les rubriques entre la racine et la rubrique courante, c’est ce que fait la boucle hiérarchie :
<BOUCLE_hier(HIERARCHIE) {id_rubrique}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a><ul>
</BOUCLE_hier>
Remarquez que l’on ouvre des entrées de liste (LI) et des sous listes (UL)
.
On est donc au niveau de notre rubrique, c’est là qu’il faut afficher les informations sur celle ci. Mais d’abord, on veut afficher ses rubriques soeurs [2] qui doivent apparaître avant :
<BOUCLE_sister_before(RUBRIQUES) {meme_parent} {par num titre} {titre<=#TITRE} {exclus}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sister_before>
Remarquez que l’on n’affiche ces rubriques que si la boucle hiérarchie a retourné un résultat, donc si l’on se trouve sous la racine. En effet, la boucle _menu affiche déjà les rubriques soeurs de la rubrique actuelle si on se trouve à la racine.
On peut enfin afficher le titre de la rubrique actuelle et ses sous rubriques :
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF" [class="(#EXPOSE{current})"]>[(#TITRE|supprimer_numero)]</a>
<B_sub_rub>
<ul>
<BOUCLE_sub_rub(RUBRIQUES) {id_parent}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sub_rub>
</ul>
</B_sub_rub>
</li>
Comme avec la boucle _sister_before, on affiche le reste des rubriques soeurs qui sont classées après la rubrique actuelle :
<BOUCLE_sister_after(RUBRIQUES) {meme_parent} {par num titre} {titre>#TITRE} {exclus}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sister_after>
Ici encore, on n’affiche ces rubriques que si l’on n’est pas à la racine grâce au code optionnel avant de la boucle hiérarchie qui suit.
Comme on a ouvert toute la hiérarchie de li et ul avec la première boucle _hier, il nous faut fermer toutes ces balises :
<BOUCLE_hier_close(HIERARCHIE) {id_rubrique}>
</ul></li>
</BOUCLE_hier_close>
On finit ainsi la boucle d’affichage de la rubrique courante. Si on n’a pas affiché la rubrique courante, alors on est sur un autre secteur à la racine et on doit encore afficher le titre du secteur :
</BOUCLE_current>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF" [class="(#EXPOSE{current})"]>[(#TITRE|supprimer_numero)]</a></li>
<//B_current>
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 : |