Programmer un fil d’Ariane

Le fil d'Ariane indique le chemin parcouru pour atteindre une page. On utilisera généralement le fil d'Ariane seulement sur les sites Web dont le menu comprend plus d'un niveau.

▼Publicité

Ex : Fil d'Ariane

Balises HTML

Au niveau des balises HTML, le fil d'Ariane est monté comme un menu. Chaque item du fil d'Ariane est donc affiché à l'aide d'une balise <li> sur laquelle on a placé un lien.

Tous les éléments du fil d’Ariane doivent être cliquables sauf le dernier qui représente la page actuellement affichée.

Programmation du fil d'Ariane

Si la structure du menu est enregistrée dans la base de données, il sera possible de monter le fil d'Ariane dynamiquement en utilisant la technique suivante. Remarquez que dans la base de données de cet exemple, on a convenu que les options du menu principal ont NULL comme valeur dans le champ menu_parentid. Les options du menu « Notes de cours », dont le id est 1, auront 1 comme valeur dans le champ menu_parentid. Les options du menu secondaire, quant à elles, auront -1 comme valeur du champ menu_parentid.

Ariane-TablesMenuPage-0

  1. Retrouver la page actuellement affichée à partir de son URL. Retenir l’URL de la page et le libellé du fil d’Ariane dans des tableaux.

    Ariane-TablesMenuPage-1

  2. Dans une boucle, retrouver le parent de la page actuelle.

    Ariane-TablesMenuPage-2

  3. Toujours dans la boucle, retrouver les informations du parent et les ajouter dans les tableaux.

    Ariane-TablesMenuPage-3

  4. La boucle se termine quand le parent est NULL.

    Ariane-TablesMenuPage-4

  5. Une fois la boucle terminée, rechercher la référence à la page d’accueil. On sait que son nom est index.php. Ajouter les info aux tableaux.

    Ariane-TablesMenuPage-5

  6. En commençant par la fin des tableaux, monter le fil d’Ariane. Ne pas mettre de lien sur le dernier élément du fil (le premier du tableau).

    Ariane-TablesMenuPage-6

CSS

Une technique intéressante consiste à utiliser l'instruction CSS border-left pour ajouter un « pipe » entre deux entrées.

Pour le premier élément, créez un élément CSS #ariane li.premier et indiquez border-left : none ; Dans le HTML, on utilisera la balise <li class= "premier">

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories

3 commentaires

  1. G

    Est-ce vraiment indispensable d’utiliser de l’espace en base pour ça?
    N’y a t-il pas un moyen plus simple en passant par les variables de sessions?

    • Christiane Lagacé

      Bonjour,

      Il existe certainement d’autres moyens. Cependant, si votre menu est tiré de la BD, alors il semble naturel d’utiliser cette même BD pour coder le fil d’Ariane.

  2. G

    Bonjour,

    Merci pour votre réponse,
    J’ai fini par comprendre et n’ai rien trouvé de plus simple.
    Grâce à votre post je suis capable désormais de programmer un fil d’Ariane.
    Merci pour votre aide.