Menu dynamique accessible

Samedi 21 août 2004 — Dernier ajout samedi 25 mars 2006

Vous avez pu utiliser le menu de ce site. Je vous le propose ici en téléchargement.

Cette page complète la contrib : Squelette : Menu dynamique accessible + 3 colonnes en CSS + géométrie variable

Retour Sommaire

Licence

Je distribue ce menu en licence LGPL. Cela signifie en gros que vous pouvez l’utiliser comme vous le voulez dans vos développements, qu’ils soient commerciaux ou non.

Retour Sommaire

Utilisation

Le script fourni dans l’archive (au format zip) combine en fait 3 fonctionnalités :

  • gestion d’un menu accessible
  • gestion des feuilles de style alternatives
  • gestion d’une mise en page 3 colonnes avec pied de page
Retour Sommaire

Menu arborescent accessible

Ce menu est accessible à la navigation au clavier et contient suffisamment d’informations pour permettre sa navigation par un aveugle.

Quelques considérations :

  • le code HTML de la page ne nécessite que des listes (LI) contenant des liens (A)
  • les éléments de la liste ayant le tag STRONG sont automatiquement dépliés
  • si le navigateur ne gère pas le DOM, le menu est affiché en mode déplié
  • → le menu ne fonctionne de manière dynamique que sur un navigateur récent respectant les standards
  • il est nécessaire de placer l’appel au .js du menu après celui-ci, sans quoi le script ne fonctionne pas !
Retour Sommaire

Feuilles de styles alternatives

  • Possibilité de changer la mise en page du site en sélectionnant une des feuilles de style alternative
  • mémorisation par cookie du choix de l’internaute
Retour Sommaire

Mise en page 3 colonnes avec pied de page

  • La taille des 3 colonnes est automatiquement ajustée à la plus haute
  • Le pied de page est automatiquement déplacé en bas des 3 colonnes
Retour Sommaire

Mise à jour pour IE7

Évidement, l’affichage de ce menu bug sous IE7 [1].

J’ai trouvé un hack palliatif

Un simple :

suffit à résoudre le problème [2].

Retour Sommaire

Merci de me faire savoir où vous l’utilisez.

[1] en tout cas avec IE7 beta 2 preview du 20 mars 2006

[2] ce hack n’est pas inclus dans l’archive accompagnant cet article

Documents à télécharger

Vos réactions

  • Problème avec IE7 6 décembre 2006 15:05, par Joseph LARMARANGE

    Bonjour,

    en train d’installer votre menu sur un site spip, il s’avère que IE7 affiche les images minus et plus sur 1 pixel. La solution proposée (balise css zoom), ne fonctionne pas.

    J’ai ajouté les lignes jp_addimg.setAttribute(’height’,’9’) ; jp_addimg.setAttribute(’width’,’9’) ;

    au fichier menuAcc.js lignes 42 et 43 et a priori ca fonctionne.

    Site perso
    • Problème avec IE7 29 mai 2007 14:26, par Mathieu

      Cette solution ne marche pas chez moi, tout comme celle proposée plus haut par Pyrat. J’ai trouvé pour moi une solution alternative qui fonctionne un peu :

      c’est de mettre l’attribut img à la class css et d’augmenter le zoom

      #menu li imgzoom:10 ;

  • > Menu dynamique accessible 28 septembre 2004 11:54, par xaccrocheur

    Yo bonjour Jacques

    Je commence l’implémentation sur http://www.halluci.net

    Merci !

    pX

    hallucinet
  • > Menu dynamique accessible 23 septembre 2004 16:48, par Magali

    Bonjour ! moi je le trouve très pratique ce menu, d’ailleurs, si je suis arrivée ici, c que je suis d’abord passée par là où on peut télécharger des squelettes, que celui ci me tentait pour le découvrir , mais qu’aucun lien pour télécharger ne me semble accessible 🙁

    Tant pis, je v me contenter du menu dynamique, et merci beaucoup de le mettre à disposition.

    je testerai éventuellement sur mon site mais quand ???????????????? , ça c une autre histoire

Revenir en haut