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.

updated on 6 December 2006

Discussion

Aucune discussion

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom