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
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 :
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 :
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 :
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
| Navigateur | Version | OS | Compatible |
|---|---|---|---|
| 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é.
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
squelette d’exemple
Vos commentaires
# Le 28 avril 2009 à 17:52, par sistriza
En réponse à : Menu - portes coulissantes -
Bonjour,
j’ai essayé l’exemple mais l’onglet de la page courante n’est pas différent des autres. Pourtant quand je passe la souris dessus, on voit bien le changement.
A quoi cela pourrait-il etre du ?
merci d’avance
Répondre à ce message
# Le 8 novembre 2006 à 22:29, par L’instit
En réponse à : Menu - portes coulissantes -
Juste un témoignage : c’est facile à utiliser. J’ai mis ce menu en place, personnalisé ici : http://www.ac-grenoble.fr/cddp38/skiscolaire
Répondre à ce message
# Le 5 mars 2005 à 08:59, par Bionet
En réponse à : Adaptation pour BioSPIP
J’ai fais une adaptation de ce menu sur BioSPIP visible sous le style dénommé BioSPIP-Class.
- Voir la Capture d’écran.
les liens vers les fichiers :
- feuille de style : http://biospip.org/biospip/biocss/b... ;
- squelette à inclure : http://biospip.org/biospip/inc_menu.html.
Répondre à ce message