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

Ajouter un commentaire

Qui êtes-vous ?

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

Dernière modification de cette page le 5 décembre 2006