Introduction
Grâce à quelques astuces CSS appliquées à une liste, il est possible d’obtenir un plan du site présenté sous forme arborescente. Il suffit d’appliquer des bordures aux bons éléments.
Dans l’exemple donné ci-dessous les rubriques sont en gras et un petit peu plus grande que les articles pour les différencier. Je n’ai pas intégré les brèves dans ce plan.
Un exemple se trouve ici
La boucle
<ul class="plansite"><BOUCLE_secteurs(RUBRIQUES){racine}{par titre}>
<li><strong><a href="#URL_RUBRIQUE">#TITRE</a></strong>
<B_artsecteur><ul>
<BOUCLE_artsecteur(ARTICLES){id_rubrique}{par titre}>
<li><a href="#URL_ARTICLE">#TITRE</a></li>
</BOUCLE_artsecteur>
</ul></B_artsecteur>
<B_sousrub><ul>
<BOUCLE_sousrub(RUBRIQUES){id_parent}{par titre}>
<li><strong><a href="#URL_RUBRIQUE">#TITRE</strong></a>
<B_artsousrub><ul>
<BOUCLE_artsousrub(ARTICLES){id_rubrique}{par titre}>
<li><a href="#URL_ARTICLE">#TITRE</a></li>
</BOUCLE_artsousrub>
</ul></B_artsousrub>
<BOUCLE_sousousrub(boucle_sousrub)></BOUCLE_sousousrub>
</li>
</BOUCLE_sousrub>
</ul></B_sousrub>
</li>
</BOUCLE_secteurs></ul>Le code CSS
A intégrer en entête de votre page ou dans le fichier CSS de votre squelette.
ul.plansite, ul.plansite ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 1.5em;
font-size: 12px; }
ul.plansite li {
border-left: 1px solid black;
color: black;
margin: 0;
padding: 0; }
ul.plansite li a {
padding-left: 0.5em;
text-decoration: none;
color: black;
border-bottom: 1px solid black; }
ul.plansite li strong {
font-size: 105%; }
Aucune discussion
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 :
|
