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 :
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 :
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
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
Discussions par date d’activité
3 discussions
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
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
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
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
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.
Suivre les commentaires : |