PRATIQUE CLIENTS WEB 
Une navigation progressive avec CSS
 
Comment faciliter les déplacements de l'internaute au sein d'un site Web par le biais de listes imbriquées combinées aux feuilles de style. (25/10/2005)
Dans un souci d'accessibilité et de simplicité d'utilisation, de plus en plus de sites structurés autour d'un grand nombre de pages font appel au principe de navigation progressive : au lieu limiter les déplacements du visiteur dans le site, une section affiche l'ensemble du cheminement suivit entre l'accueil et la page en cours de lecture.

  Forum

Réagissez dans les forums de JDN Développeurs

Le problème est que l'implémentation peut rapidement devenir maladroite, ne serait-ce que sémantiquement. Voici donc comment s'y prendre en utilisant une série de listes imbriquées pour représenter les pages et sous-pages, et CSS pour "aplatir " cet ensemble en une seule ligne cohérente.

<style>
#navprog ul {
  display: inline;
  padding-left: 0;
  margin-left: 0;
  }

#navprog ul li {
  display:inline;
  }

#navprog ul ul li:before {
  content: "> ";
  }
</style>

<div id="navprog">
  <ul>
    <li><a href="">Accueil</a>
      <ul>
        <li><a href="">Section</a>
          <ul>
            <li><a href="">Rubrique</a>
              <ul>
                <li><a href="">Page</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Ce qui, d'une liste classique : ...nous donne une ligne de navigation pratique :
Malheureusement, l'affichage du séparateur ne marche pas sur tous les navigateurs... Il faudrait alors utiliser une image de fond avec l'attribut background-position sur left.


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius
 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page