Une navigation progressive avec CSS

Accueil

RECHERCHER

CHAINES

RESSOURCES

RUBRIQUES JDN

VOTRE HIGH TECH

SCIENCE

ANNUAIRES

CONTACTS

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 :

Accueil
- Section
  - Rubrique
    - Page

...nous donne une ligne de navigation pratique :

Accueil
- Section
  - Rubrique
    - Page

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.


Xavier Borderie, JDN Développeurs





Accueil \| Haut de page