Plan arborescent

Une petite liste, quelques lignes de CSS et on obtient une belle arborescence présentant le plan du site.

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%; }

Discussion

2 discussions

  • J’ai un problème sous I.E avec ce plan. Les balises

    sont décalées de 5px vers la droite par rapport à Firefox, et il faut mettre margin-left : -5px ; dans ul.plansite li a mais dans ce cas c’est Firefox qui n’affiche plus correctement ! Je vais quand même pas utiliser du JavaScript pour ça ?!

    Je suis le seul à rencontrer ce problème ?

    Répondre à ce message

  • 5

    Je viens de faire une petite variante (j’ai sorti la balise strong du code html pour l’intégrer au CSS ce qui est plus logique).

    J’ai également utilisé la balise #EXPOSER pour signaler la rubrique en cours.

    • Inutile d’aller jeter un coup d’oeil sur le site ci-avant. Je suis revenue de cette arborescence suite à de gros problèmes sous MSIE. En effet, le menu en question refusait alors de rester dans sa boîte CSS et s’étalait sur le texte à sa droite.

    • Tu aurais dû le laisser, qu’on puisse regarder pourquoi il s’étalait. C’est assez étonnant que ta liste actuelle ne s’étale pas et que l’autre si. Si tu la remets préviens-moi que je fasse quelques tests pour voir l’origine du pb sous IE.

    • Je l’ai remis en ligne dans le style « menu hiérarchique ». Voilà, il est tout prêt pour les tests. Les CSS se trouvent dans http://www.biospip.org/biospip/biocss/.

    • Je complète mon précédent message :
      -  J’ai placé un sélecteur de styles en haut à gauche de chaque page comme celle-ci ;
      -  En choisissant « menu hérarchique » on obtiens la même page avec le menu arborescent de cette contribution ;
      -  Le squelette du menu se trouve à l’adresse : http://biospip.org/biospip/inc_menu.html ;
      -  Les CSS du menu se trouvent à l’adresse : http://biospip.org/biospip/biocss/d....

      Voilà je crois qu’il y a tout maintenant ;-)

    • Problème résolu : ne pas mettre de width sur les ul de deuxième niveau (et plus) mais seulement sur le premier niveau. Si on prend l’exemple ci dessus : on peut mettre une taille sur ul.plansite mais pas sur ul.plansite ul.

      Firefox donne la priorité au niveau le plus haut et IE au niveau le plus bas. On a donc des comportements différents.

    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 :

  • 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
  • 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 apparaît.

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.

Qui êtes-vous ?
[Se connecter]

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