Menu - portes coulissantes -

Un menu efficace et joli en CSS, c’est possible grâce à la méthode des portes coulissantes. Un vrai cas d’école. Passionnant pour qui souhaite découvrir les CSS tout en enjolivant son SPIP.

Introduction

Nous allons chercher à afficher la liste des secteurs avec la méthode des portes coulissantes, traduction de Samuel Latchman/pompage.net d’un article de Douglas Bowman sur AListApart :

“portes coulissantes” en CSS

Cela consiste essentiellement en un travail sur les CSS que nous ne détaillerons pas ici (lire l’article en question pour plus d’informations à ce sujet).

Il faut simplement savoir :

  • que l’implémentation fournie ici est compatible avec une grande majorité de navigateur, même Internet Explorer de Microsoft.
  • que l’effet au survol des onglets avec la souris s’effectue sans code javascript et s’applique à une simple liste non ordonnée (<ul><li>...</li></ul>).
  • que c’est valide... ;-)

Premiers pas

<!-- Menu de navigation general -->
<div id="header">
<ul>
  <li id="current">
  [<a href="(#URL_SITE_SPIP)"><span>#NOM_SITE_SPIP</span></a>]
  </li>
  <li>
  <a href="plan.php3"><span><:plan_site:></span></a>
  </li>
  <li>
  <a href="resume.php3"><span><:en_resume:></span></a>
  </li>
  <li>
  <a href="ecrire/"><span><:espace_prive:></span></a>
  </li>
</ul>
</div>

Vous aurez reconnu, à quelques retouches près, le code qui génère le menu de navigation général des squelettes par défaut. Voici ce qu’il pourrait donner sur la page d’accueil du site, dans sommaire.html par exemple :

portes coullisantes en CSS
Menu de navigation par défaut et quelques feuilles de styles

La différence de couleur entre les onglets marque la page active et est définie par le code id="current". En recopiant le bloc ci-dessus dans plan.html et en déplaçant l’identifiant “current” vous n’aurez rien de plus à modifier dans la feuille de style.

Il faut bien entendu ajouter la ligne suivante entre <head> et </head> du squelette html : <link rel="stylesheet" href="portes_coulissantes.css" type="text/css" media="screen" />

Application aux secteurs

Maintenant, comment faire pour appliquer ceci aux secteurs d’un site, tout en s’arrangeant pour que l’onglet actif le soit toujours quand on est dans une de ses sous-rubriques, dans une de ses brèves ou bien dans un article de son arborescence ?

La boucle ci-dessous le permet, en toute logique. On “marque” la rubrique exposée:

<!-- Menu de navigation rubriques -->
<B_rubriques>
<div id="header">
<ul>
<BOUCLE_rubriques(RUBRIQUES) {racine} {par titre}>
  <li[ id="(#EXPOSER|current)"]>
    <a
      href="#URL_RUBRIQUE"
      [title="(#DESCRIPTIF|textebrut|entites_html)"]
    ><span>#TITRE</span></a>
  </li>
</BOUCLE_rubriques>
</ul>
</div>
</B_rubriques>

Sur une version 1.8 (toujours en développement à ce jour), elle est amplement suffisante car la balise #EXPOSER suffit, la hierarchie étant “exposée” en entier.

C’est une autre paire de manche pour SPIP 1.7.2 !

Nous n’avons «codé» qu’une seule des deux méthodes dévoilées sur pompage.net, à savoir changer le style d’une balise identifiée par id="current".

L'autre consiste à identifier chaque balise <li> de manière unique. Et ce qui identifie simplement une rubrique dans SPIP, c’est son identifiant (forcément ;-) ). On peut donc faire ceci:

<!-- Menu de navigation rubriques pour la version 1.7.2 -->
<B_rubriques>
<div id="header">
<ul>
<BOUCLE_rubriques(RUBRIQUES) {racine} {par titre}>
  <li id="rub#ID_RUBRIQUE">
    <a
      href="#URL_RUBRIQUE"
      [title="(#DESCRIPTIF|textebrut|entites_html)"]
    ><span>#TITRE</span></a>
  </li>
</BOUCLE_rubriques>
</ul>
</div>
</B_rubriques>

Toutefois, l’onglet n’est actif que si on est dans la page de secteur elle-même. Il faudrait pour cela modifier le fichier css en conséquence, et copier autant de fois que nécessaire les declarations de #current que vous avez de secteurs et user d’un artifice supplémentaire pour indiquer lequel de ces indicateurs est actif. C’est possible... On ne crée pas un secteur tous les jours...

Toutefois, puisqu’il sert à ça, pourquoi ne pas faire calculer à SPIP quel #rubXXX est la copie de #current pour la page qui nous intéresse ?

Nous illustrerons ici un seul cas, vous retrouverez dans la page portes_coulissantes172.html de l’archive tous les autres.

Cas d’une brève :

Insérez entre <head> et </head> de votre squelette breve.html :

<link rel="stylesheet" href="portes_coulissantes.css" type="text/css" media="screen" />
  <B_breve_active>
  <style type="text/css" media="screen">
    <BOUCLE_breve_active(BREVES){id_breve}>
      #header #rub#ID_RUBRIQUE a { /* #TITRE */
        background-position:0 -150px;
        border-width:0;
      }
      #header #rub#ID_RUBRIQUE a span {
        background-position:100% -150px;
        padding-bottom:5px;
        color:#333;
      }
    </BOUCLE_breve_active>
  </style>
  </B_breve_active>

puis la boucle de rubrique pour la version 1.7.2 dans la partie body du fichier html.

Cette petite astuce permet de rajouter des styles css pour cette page uniquement...

Les autres exemples de la page portes_coulissantes172.html se servent de la balise #ID_SECTEUR des boucles ARTICLES et RUBRIQUES pour retrouver l’identifiant du secteur voulu.

à noter que ce qui fonctionne pour SPIP1.7.2 marche toujours sur la version de développement actuelle de SPIP1.8... donc se sera au choix :-)

Compatibilités

NavigateurVersionOSCompatible
Mozilla 1.5 Linux OUI
Mozilla 1.5 MSWindows OUI
Mozilla 1.31 Mac OS OUI
Netscape 7.0 MSWindows OUI
Konqueror 3.2.4 Linux OUI
Galeon 1.3.9 Linux OUI
FireFox 1.0 Linux OUI
FireFox 1.0 MSWindows OUI
FireFox 1.0 MacOS X OUI
InternetExplorer 6.0 MSWindows OUI
Safari 1.2.4 MacOS X OUI

Les navigateurs en mode texte et/ou anciens (comme Netscape 4.75, par exemple) ne sont pas concernés par la mise en page. Toutefois, l’usage d’une liste non ordonnée conjugué à l’absence de javascript permet de conserver une bonne lisibilité.

Page de démonstration

Telle quelle, cette contribution fonctionne parfaitement pour SPIP1.9 et versions ultérieures.

Toutefois, la seconde archive reprend les mêmes boucles et les mêmes définitions de style et quelques modifications pour employer les notations courantes de la version 1.9 (balises #CHEMIN, #URL_PAGE et filtre |parametrer_url, le tout étant à placer dans votre dossier squelettes

Une nouvelle page de démo aussi

Discussion

3 discussions

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

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