Liste imbriquer ou Carte de site en CSS

Dernièrement, lors de la conception web d'un site web, je me suis retrouver devant la création d'une carte de site (site map). Après avoir bien réfléchi, je me suis rendu compte qu'une carte de site n'étais ni plus ni moins qu'une liste d'élément vertical plus ou moins indenté selon le niveau ou la page se trouve. J'ai donc décidé de faire appel aux feuilles de styles afin de répondre à mes besoins.

Traduction et adaptation de : SimpleBits | Styling Nested Lists

1. Présentation

Dans sa plus simple expression, une liste hierarchique non stylisé en html ressemble un peu à celà :

    HTML :

        <ul>
            <li>Accueil</li>
            <li>Tutoriels
               <ul>
                   <li>Débuter en php</li>
                   <li>CSS
                      <ul>
                          <li>Menu vertical</li>
                          <li>Menu horizontal</li>
                      </ul>
                   </li>
                   <li>Débuter en asp</li>
               </ul>
            </li>
            <li>Contact</li>
        </ul>

2. Ajouter du style

Afin d'ajouter le style à votre liste, il faut tout dabord lui attribuer un ID. Pourquoi un ID et non un CLASS ? Afin que ce ne soit que cette liste si qui soit affecter par le style et non toute les listes.

    HTML :

        <ul id="carte">
            <li>Accueil</li>
            <li>Tutoriels
               <ul>
                   <li>Débuter en php</li>
                   <li>CSS
                      <ul>
                          <li>Menu vertical</li>
                          <li>Menu horizontal</li>
                      </ul>
                   </li>
                   <li>Débuter en asp</li>
               </ul>
            </li>
            <li>Contact</li>
        </ul>

En utilisant des sélecteurs descendant, nous allons créer un style différent pour chaque niveau. Nous allons donc faire simple; Le niveau supérieur sera de taille supérieur et en gras et les niveaux inférieurs seront progressivement de taille inférieur. Nous allons donc débuter par le niveau supérieur :

    CSS :

        #carte {
            font-size: 140%;
            font-weight: bold;
            }

C'est quelques lignes va mettre la liste entière en gras ainsi qu'avec une police d'écriture 40% plus grande que la taille d'affichage défini. Nous allons donc maintenant s'attaquer au niveau inférieur :

sitemap1

    CSS :

        #carte {
            font-size: 140%;
            font-weight: bold;
            }

        #carte li ul {
            font-size: 90%;
            font-weight: normal;
            }

Les quelques lignes rajouté auront pour effet de réduire la taille des niveaux inférieurs à 90% de la taille réel d'affichage ainsi que d'éliminer l'affichage en gras des niveaux inférieur. Comme vous pouvez le constater, nous n'avons pas besoin d'asigner une taille inférieur au autres niveau. Celà ce produit automatiquement en réduisant de 10% (font-size: 90%) la taille du niveau supérieur. Un peu compliquer à voir dans le code, mais lors de l'affichage de votre liste vous verrez.

3. Ajout d'image ...

Let’s turn off default styling, and add a decorative bullet for only third level items by using the background property. We’ll first turn off list styling in general for all li elements, then we’ll specifically assign a background image for third level items:

CSS :
sitemap2

        #carte {
            font-size: 140%;
            }

        #carte li {
            list-style: none;
            }

        #carte li ul {
            font-size: 90%;
            }

        #carte li ul li ul li {
            padding-left: 16px;
            background: url(bullet.gif) no-repeat 0 50%;
            }

4. Conclusion

Afin de construire un "site-map" du genre, il ne suffisait que de savoir utilisé les listes imbriquées. En assignant un ID au niveau supérieur, nous pouvons alors laissé notre feuille de style faire le reste du travail séparément pour chaque niveau. En modifiant le code, vous pourrez arrivez à des résultats beaucoup plus jolie. Nous vous avons ici exposé un exemple bien simple afin que vous compreniez le principe des listes imbriqués et des feuilles de style.

Ajouter cette page à votre Digg-Like préféré