Menu simple à deux niveaux avec mise en lumière du niveau actif

Un menu tout simple avec des boucles.

Voici une boucle simple permettant de réaliser un menu à deux niveaux :

-  niveau 1 : secteurs
-  niveau 2 : rubriques, articles et sites rattachés au secteur

Lorsque le menu est affiché dans une page de rubrique ou d’article, l’élément correspondant du menu est mis en valeur.

Cette boucle est une variante de celle que j’utilise sur mon site perso.

La boucle

<BOUCLE_msecteurs(RUBRIQUES) {par num titre} {racine}>

 <div class="menu">
  <ul class="menu">
   <li class="menu-titre">
    <a [class="menu(#EXPOSER)"] title="#DESCRIPTIF" href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]</a>
   </li>
		
   <BOUCLE_mrubriques(RUBRIQUES) {id_parent} {par num titre}>
    <li class="menu">
     <a [class="menu(#EXPOSER)"] title="#DESCRIPTIF" href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]</a>
    </li>
   </BOUCLE_mrubriques>

   <BOUCLE_marticles(ARTICLES) {id_rubrique} {par num titre}>
    <li class="menu">
     <a [class="menu(#EXPOSER)"] title="#DESCRIPTIF" href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a>
    </li>
   </BOUCLE_marticles>

   <BOUCLE_mliens (SITES) {id_rubrique} {par num nom_site}>
    <li class="menu">
     <a [class="menu(#EXPOSER)"] title="#DESCRIPTIF" href="#URL_SITE">[(#NOM_SITE|supprimer_numero)]</a>
    </li>
   </BOUCLE_mliens>

  </ul>
 </div>

</BOUCLE_msecteurs>

Commentaires

La boucle msecteurs est la boucle principale : elle affiche les secteurs (rubriques à la racine du site). Elle contient trois boucles :

-  La boucle mrubriques qui affiche les rubriques du secteur
-  la boucle marticles qui affiche les articles situés directement sous le secteur
-  la boucle msites qui affiche les sites rattachés au secteur : elle n’est pas indispensable mais je l’utilise sur mon site pour insérer des liens externes dans le menu. Si elle ne vous sert pas, supprimez-la.

Utilisation

2
Structure du site
2

Pour être utilisable, ce menu suppose que votre site soit structuré en secteurs qui représentent chacun un titre du menu, mais surtout que tous les éléments situés directement sous un secteur (à part les brèves) soient destinés à figurer au menu. Si ce n’est pas le cas, vous pouvez supprimer une des boucles secondaires pour faire disparaître, par exemple, les liens externes (sites).

Les éléments du niveau 2 sont affichés dans cet ordre : les rubriques du secteurs, puis les articles, puis les sites. Vous pouvez bien sûr modifier l’ordre en déplaçant la boucle dans le squelette.

Les éléments sont tous classés par numéro (filtre {par num titre}). Le titre doit donc commencer par le numéro d’ordre, suivi d’un point et d’un espace. Exemple :

-  1. Première rubrique
-  2. Deuxième rubrique

2Utilisation dans les squelettes2

Pour utiliser ce menu dans vos squelettes, vous pouvez tout simplement y placer la boucle elle-même, mais le meilleur moyen est de l’inclure par le biais du code suivant :

<INCLURE(page.php3) {fond=menu} {id_article} >

Attention, ce code n’est plus valable avec la version 1.9, remplacer par :
<INCLURE {fond=menu} {id_article} >

Dans ce cas le fichier menu.html contenant la boucle doit se trouver dans votre répertoire squelettes.

{id_article} (à remplacer par id_rubrique pour une rubrique, et à supprimer dans le squelette du sommaire) transmet le numéro d’article, ce qui permettra de mettre en lumière le lien correspondant dans le menu. Pour celà vous devrez créer une entrée de type a.menuon dans votre fichier css (voir plus bas).

2Feuille de style2

Pour utiliser cette boucle telle quelle, vous devrez créer les entrées suivantes dans votre feuille de style css :

-  .menu
-  ul.menu
-  li.menu-titre
-  li.menu
-  a.menu
-  a.menuon

J’espère ne rien avoir oublié car je ne suis pas une spécialiste du css ... je vous laisse donc expérimenter pour découvrir l’utilisation de chacune de ces entrées.

2Divers2

Le code title="#DESCRIPTIF" permet d’afficher le descriptif de la rubrique, de l’article ou du site en info-bulle.

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

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