Faire un menu dynamique ouvert et accessible

Openweb.eu.org > Articles  > Faire un menu dynamique ouvert et accessible

Abstract

Réalisons un menu déroulant qui soit à la fois portable, utilisable sans JavaScript et accessible aux personnes handicapées.

Article

Un menu dynamique

Parfois, pour des raisons de place sur la page, on ajoute un menu dynamique. Seulement qui dit dynamique dit obligation d'avoir un navigateur supportant le langage de script utilisé. Comment faire un menu qui fonctionne sans ce langage ? Comment le rendre utilisable par tous, quelles que soient les capacités du matériel ou de l'internaute ? Nous allons tenter de relever ce défi pas à pas.

Il est important que vous gardiez à l'esprit que le principal interêt d'un menu dynamique est de donner un double niveau d'entrée. Un clic sur un menu ouvre une page détaillant les éléments du sous-menu et permettant au visiteur indécis de faire un choix. Un survol de ce même lien fait apparaître un sous-menu permettant à l'internaute d'accéder en un clic à l'information, s'il a déjà fait son choix.

Attention : —

Si vous êtes aveugle, vous ne devriez percevoir aucune différence entre les 3 étapes du menu puisque c'est le but de l'article. De plus, les liens ne sont pas renseignés et renvoient sur la même page.

La page brute

Nous allons tout d'abord réaliser la page à proprement parler sans nous soucier ni du rendu, ni de l'interactivité mais en prenant en compte l'accessibilité.

Le code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>
      Test de menu
    </title>

    <meta http-equiv="Content-Type" content=
      "text/html; charset=iso-8859-1">
  </head>
  <body lang="fr">
    <p id="access">
      [<a href="/articles/menu_universel#" accesskey="0">Politique
        d'accessibilité</a>]
      [<a href="/articles/menu_universel#texte" accesskey="1">Aller
        au contenu</a>]
      [<a href="/articles/menu_universel#menu1" accesskey="2">Aller
        au menu</a>]
    </p>

    <div id="texte">
      <p>
        Scrahascrit mohotis, rusn scratedeus en
        pronohus cremaquoranis. Phel vup, etrop
        usnuquori mu nutram demol. Stobaquadore
        ilirher, hisch themipam ol asnuplue thoticrat.
        Spem ahospum quiduhiquiduer, la scat satidam
        aspadront. Rhasadit in amuv omebras. Ecepore
        alaps sni taspes itocont. Ubriplue pribinatis,
        iquiduh orem ipu rimalius quidematanis. Arinam
        in cespus cinilas. Crequad ofopriem, quadop
        molines dad rasalon ilaspant. Igopr brugipam
        va gidosmam vobarotis. Smoquad thegecr al
        aniquidem cunitrant. Lofoti mapopr, cratr
        phiropeus cer togibit crahego.
      </p>
      <p>
        Apher est. Cedinam cop uco sischa quoru
        psilascham est. Dipsam in rhigustam
        quorabanatis. Phenebron in spomamus
        stemeprotis. Anusch initiem pu tescha
        thehescranis. Ohiph plisch bolotam lu ecananis
        hut thehaquoratis. Quorav scem mesciem me
        cepemer pi aspitront. Ephaquad quorol ev
        psivaspem vehant. Usmispeus, ocimus men
        rilecit naphanis. Rutrue som bal mepres tof
        iproplem est. Smin scridupeus lovorher, na
        esiquad rulam itrisner. Quadisch udepli
        upraplant, rac muph truvibeus baranis.
      </p>

    </div>
    <hr>
    <p id="menu1">
      <a href="/articles/menu_universel#" title="Menu 1">Animaux :</a>
    </p>

    <ul id="ssmenu1">
      <li>
        <a href="/articles/menu_universel#" title="Sous-menu 1">Girafe</a> ;
      </li>
      <li>
        <a href="/articles/menu_universel#" title="Sous-menu 2">Pingouin</a>.
      </li>

    </ul>
    <p id="menu2">
      <a href="/articles/menu_universel#" title="Menu 2">Villes :</a>
    </p>
    <ul id="ssmenu2">

      <li>
        <a href="/articles/menu_universel#" title="Sous-menu 1">Lisbonne</a> ;
      </li>
      <li>
        <a href="/articles/menu_universel#" title="Sous-menu 2">Varsovie</a> ;
      </li>

      <li>
        <a href="/articles/menu_universel#" title="Sous-menu 3">Lima</a> ;
      </li>
      <li>
        <a href="/articles/menu_universel#" title="Sous-menu 4">Nairobi</a>.
      </li>

    </ul>
    <p id="menu3">
      <a href="/articles/menu_universel#" title="Menu 3">Personnages :</a>
    </p>
    <ul id="ssmenu3">

      <li>
        <a href="/articles/menu_universel#" title="Sous-menu 1">Gandhi</a> ;
      </li>
      <li>
        <a href="/articles/menu_universel#" title="Sous-menu 2">César</a> ;
      </li>

      <li>
        <a href="/articles/menu_universel#" title="Sous-menu 3">Gengis
          Khan</a>.
      </li>
    </ul>
    <p id="copy">
      ©Blablablabla
    </p>

  </body>
</html>
      
Note : —

Les différents éléments de la page sont identifiés grâce à l'attribut id afin de pouvoir les enjoliver et les manipuler par la suite.

Vous pouvez tester cette étape dans votre navigateur.

Les explications

Le menu se présente sous la forme d'une liste à puce numérotée en bas de page, ce qui permet de lire directement le contenu de la page. La typographie a été respectée en ce qui concerne les listes avec utilisation d'un point-virgule précédé d'une espace insécable afin d'éviter les retours à la ligne disgracieux, même s'ils sont improbables dans notre cas. Ceci permet aussi une meilleure accessibilité puisqu'une synthèse vocale marque des pauses lorsqu'elle en rencontre. Nous pourrions aussi utiliser des virgules.

Puisque nous parlons d'accessibilité, nous avons des liens permettant de naviguer dans la page. En effet, si un aveugle se rend compte à la lecture du contenu que la page ne correspond pas à son attente, il doit pouvoir aller directement au menu. Il retournera en haut de la page et trouvera les liens adéquats. De plus, ces liens sont pourvus d'un accélérateur, via accesskey, qui permet de les lancer grâce à une combinaison de touches. Il existe plusieurs écoles quant à l'ordre de ces liens. Pour ma part, je recommande de commencer par la politique d'accessibilité car un aveugle peut tomber sur n'importe quelle page, depuis un moteur de recherche par exemple, et ces informations lui sont utiles. Vous pouvez consulter notre politique d'accessibilité pour en savoir plus.

C'est bien beau, me direz-vous, mais nous sommes loin d'avoir une page habillée et dynamique. Certes mais notez toutefois que ce rendu sera celui d'un navigateur texte, par exemple. Vous voyez aussi que même ainsi, il est possible de cliquer sur « Animaux » pour avoir les détails des pages « Girafe » et « Pingouin » ou directement sur ces liens.

Mise en forme

Nous allons maintenant passer au rendu de notre page HTML grâce aux CSS. Pour cet exemple, j'ai choisi un rendu sobre, tout comme le contenu de la page n'est formé que de simples paragraphes. Il est bien sûr possible de remplacer les couleurs de fond par des images et d'enrichir le contenu de photos ou de tableaux.

Le code HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>

      Test de menu
    </title>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href=
    "menu.css" title="défaut">
  </head>
  <body lang="fr">
    <p id="access">

      [<a href="/articles/menu_universel#" accesskey="0">Politique
        d'accessibilité</a>]
      [<a href="/articles/menu_universel#texte" accesskey="1">Aller
        au contenu</a>]
      [<a href="/articles/menu_universel#menu1" accesskey="2">Aller
        au menu</a>]
    </p>
    <div id="texte">

      <p>
        Scrahascrit mohotis, rusn scratedeus en
        pronohus cremaquoranis. Phel vup, etrop
        usnuquori mu nutram demol. Stobaquadore
        ilirher, hisch themipam ol asnuplue thoticrat.
        Spem ahospum quiduhiquiduer, la scat satidam
        aspadront. Rhasadit in amuv omebras. Ecepore
        alaps sni taspes itocont. Ubriplue pribinatis,
        iquiduh orem ipu rimalius quidematanis. Arinam
        in cespus cinilas. Crequad ofopriem, quadop
        molines dad rasalon ilaspant. Igopr brugipam
        va gidosmam vobarotis. Smoquad thegecr al
        aniquidem cunitrant. Lofoti mapopr, cratr
        phiropeus cer togibit crahego.
      </p>
      <p>
        Apher est. Cedinam cop uco sischa quoru
        psilascham est. Dipsam in rhigustam
        quorabanatis. Phenebron in spomamus
        stemeprotis. Anusch initiem pu tescha
        thehescranis. Ohiph plisch bolotam lu ecananis
        hut thehaquoratis. Quorav scem mesciem me
        cepemer pi aspitront. Ephaquad quorol ev
        psivaspem vehant. Usmispeus, ocimus men
        rilecit naphanis. Rutrue som bal mepres tof
        iproplem est. Smin scridupeus lovorher, na
        esiquad rulam itrisner. Quadisch udepli
        upraplant, rac muph truvibeus baranis.
      </p>
    </div>

    <hr>
    <p id="menu1" class="menu">
      <a href="/articles/menu_universel#" title=
      "Menu 1">Animaux<span> :</span></a>
    </p>

    <ul id="ssmenu1" class="ssmenu">
      <li>
        <a href="/articles/menu_universel#" title=
        "Sous-menu 1">Girafe</a><span> ;</span>
      </li>

      <li>
        <a href="/articles/menu_universel#" title=
        "Sous-menu 2">Pingouin</a><span>.</span>
      </li>
    </ul>

    <p id="menu2" class="menu">
      <a href="/articles/menu_universel#" title=
      "Menu 2">Villes<span> :</span></a>
    </p>
    <ul id="ssmenu2" class="ssmenu">

      <li>
        <a href="/articles/menu_universel#" title=
        "Sous-menu 1">Lisbonne</a><span> ;</span>
      </li>
      <li>

        <a href="/articles/menu_universel#" title=
        "Sous-menu 2">Varsovie</a><span> ;</span>
      </li>
      <li>
        <a href="/articles/menu_universel#" title=
        "Sous-menu 3">Lima</a><span> ;</span>

      </li>
      <li>
        <a href="/articles/menu_universel#" title=
        "Sous-menu 4">Nairobi</a><span>.</span>
      </li>

    </ul>
    <p id="menu3" class="menu">
      <a href="/articles/menu_universel#" title=
      "Menu 3">Personnages<span> :</span></a>
    </p>

    <ul id="ssmenu3" class="ssmenu">
      <li>
        <a href="/articles/menu_universel#" title=
        "Sous-menu 1">Gandhi</a><span> ;</span>
      </li>

      <li>
        <a href="/articles/menu_universel#" title=
          "Sous-menu 2">César</a><span> ;</span>
      </li>
      <li>

        <a href="/articles/menu_universel#" title="Sous-menu 3">Gengis
        Khan</a><span>.</span>
      </li>
    </ul>
    <p id="copy">

      ©Blablablabla
    </p>
  </body>
</html>
      

Explications

Peu de changement, si ce n'est l'ajout du lien vers la feuille de style dans le head et des spans dans les menus pour pouvoir cacher la ponctuation.

Code CSS

body {
  background-color:#FFF;
  color:#333;
  font-family:Verdana, Geneva, Arial,
    Helvetica, sans-serif;
  margin:0;
  padding:0;
}

hr {
  display:none;
}

.menu, .ssmenu {
  background-color:#FFF;
  color:#333;
  border:0.1em solid #333;
  margin:1em;
}

.menu span, .ssmenu span {
  display:none;
}

.menu a, .ssmenu a {
  text-decoration:none;
  color:#333;
}

.menu {
  padding:0 1em;
}

.ssmenu {
  padding:0;
}

.ssmenu li {
  list-style-type:disc;
  list-style-position:inside;
  padding-left:0.2em;
  color:#F93;
}

.ssmenu li:hover, .ssmenu a:hover,
  .ssmenu a:focus  {
  background-color:#F93;
  color:#FFF;
}

.ssmenu li:hover {
  list-style-type:circle;
}

#access a, #texte a {
  color:#F93;
}

#access a:hover, #texte a:hover {
  text-decoration:none;
}

#access a:focus, #texte a:focus {
  text-decoration:none;
  background-color:#F93;
  color:#FFF;
}

#access {
  margin:1em;
  padding:0;
}

#texte {
  text-align:justify;
  margin:1em;
  padding:0;
}

#texte p {
  text-indent:1em;
}

#copy {
  padding:1em;
  margin:0;
  text-align:center;
}
      

Explications

Nous réglons tout d'abord les paramètres globaux de la page. Ensuite, nous traitons la partie accessibilité et nous cachons la barre de séparation et la ponctuation dans le menu. Nous mettons en forme les menus et sous-menus ainsi que les liens qu'ils contiennent. Enfin nous traitons le texte et le bas de page.

Le point sensible concerne les :hover. En effet, le survol des éléments d'une liste n'étant pas toujours bien compris par les navigateurs, on ajoute un survol des liens. De même la partie :focus concerne les personnes qui ne peuvent utiliser une souris et naviguent au clavier. Généralement, la touche Tab permet de sauter de lien en lien, ce que vous pouvez essayer sur votre navigateur.

Vous pouvez tester cette étape.

Interactivité

Bon c'est bien beau mais où il est le menu dynamique, hum ? Et bien on y arrive.

Le code HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>
      Test de menu
    </title>
    <meta http-equiv="Content-Type" content=
      "text/html; charset=iso-8859-1">

    <link rel="stylesheet" type="text/css" href=
      "menu.css" title="défaut">
    <script type="text/javascript" src="menu.js">
    </script>
  </head>
  <body lang="fr" onload="Chargement();">
    <p id="access" onmouseover="CacherMenus();">

      [<a href="/articles/menu_universel#" accesskey="0"
        onfocus="CacherMenus();">Politique
        d'accessibilité</a>]
      [<a href="/articles/menu_universel#texte" accesskey="1"
        onfocus="CacherMenus();" >Aller
        au contenu</a>]
      [<a href="/articles/menu_universel#menu1" accesskey="2"
        onfocus="CacherMenus();">Aller
        au menu</a>]
    </p>
    <div id="texte" onmouseover="CacherMenus();">

      <p>
        Scrahascrit mohotis, rusn scratedeus en
        pronohus cremaquoranis. Phel vup, etrop
        usnuquori mu nutram demol. Stobaquadore
        ilirher, hisch themipam ol asnuplue thoticrat.
        Spem ahospum quiduhiquiduer, la scat satidam
        aspadront. Rhasadit in amuv omebras. Ecepore
        alaps sni taspes itocont. Ubriplue pribinatis,
        iquiduh orem ipu rimalius quidematanis. Arinam
        in cespus cinilas. Crequad ofopriem, quadop
        molines dad rasalon ilaspant. Igopr brugipam
        va gidosmam vobarotis. Smoquad thegecr al
        aniquidem cunitrant. Lofoti mapopr, cratr
        phiropeus cer togibit crahego.
      </p>
      <p>
        Apher est. Cedinam cop uco sischa quoru
        psilascham est. Dipsam in rhigustam
        quorabanatis. Phenebron in spomamus
        stemeprotis. Anusch initiem pu tescha
        thehescranis. Ohiph plisch bolotam lu ecananis
        hut thehaquoratis. Quorav scem mesciem me
        cepemer pi aspitront. Ephaquad quorol ev
        psivaspem vehant. Usmispeus, ocimus men
        rilecit naphanis. Rutrue som bal mepres tof
        iproplem est. Smin scridupeus lovorher, na
        esiquad rulam itrisner. Quadisch udepli
        upraplant, rac muph truvibeus baranis.
      </p>
    </div>

    <hr>
    <p id="menu1" class="menu">
      <a href="/articles/menu_universel#" title="Menu 1" onmouseover=
        "MontrerMenu('ssmenu1');" onfocus=
        "MontrerMenu('ssmenu1');">Animaux<span> :</span></a>
    </p>

    <ul id="ssmenu1" class="ssmenu">
      <li>
        <a href="/articles/menu_universel#" title=
          "Sous-menu 1">Girafe</a><span> ;</span>
      </li>

      <li>
        <a href="/articles/menu_universel#" title=
          "Sous-menu 2">Pingouin</a><span>.</span>
      </li>
    </ul>

    <p id="menu2" class="menu">
      <a href="/articles/menu_universel#" title="Menu 2" onmouseover=
        "MontrerMenu('ssmenu2');" onfocus=
        "MontrerMenu('ssmenu2');">Villes<span> :</span></a>
    </p>
    <ul id="ssmenu2" class="ssmenu">

      <li>
        <a href="/articles/menu_universel#" title=
          "Sous-menu 1">Lisbonne</a><span> ;</span>
      </li>
      <li>

        <a href="/articles/menu_universel#" title=
          "Sous-menu 2">Varsovie</a><span> ;</span>
      </li>
      <li>
        <a href="/articles/menu_universel#" title=
          "Sous-menu 3">Lima</a><span> ;</span>

      </li>
      <li>
        <a href="/articles/menu_universel#" title=
          "Sous-menu 4">Nairobi</a><span>.</span>
      </li>

    </ul>
    <p id="menu3" class="menu">
      <a href="/articles/menu_universel#" title="Menu 3" onmouseover=
        "MontrerMenu('ssmenu3');" onfocus=
        "MontrerMenu('ssmenu3');">Personnages<span> :</span></a>
    </p>

    <ul id="ssmenu3" class="ssmenu">
      <li>
        <a href="/articles/menu_universel#" title=
          "Sous-menu 1">Gandhi</a><span> ;</span>
      </li>

      <li>
        <a href="/articles/menu_universel#" title="Sous-menu 2">César</a>
          <span> ;</span>
      </li>
      <li>

        <a href="/articles/menu_universel#" title="Sous-menu 3">Gengis
          Khan</a><span>.</span>
      </li>
    </ul>
    <p id="copy">

      ©Blablablabla
    </p>
  </body>
</html>
      

Les seuls changements sont l'ajout de l'appel du script dans le head et le mise en place des événements onload, onmouseover et onfocus. Ce dernier sert là encore à intercepter les déplacements sur un lien effectués à l'aide du clavier et non de la souris.

Le code JavaScript

var blnOk=true;

function Chargement() {

  if(document.body.style.backgroundColor!="") { blnOk=false; }
  if(document.body.style.color!="") { blnOk=false; }
  if(document.body.style.marginTop!="") { blnOk=false; }
  if(document.getElementById) {
    with(document.getElementById("texte").style) {
      if(position!="") { blnOk=false; }
      if(top!="") { blnOk=false; }
      if(left!="") { blnOk=false; }
      if(width!="") { blnOk=false; }
      if(height!="") { blnOk=false; }
      if(zIndex!="") { blnOk=false; }
      if(margin!="") { blnOk=false; }
      if(padding!="") { blnOk=false; }
      if(visibility!="") { blnOk=false; }
    }
  }
  else{
  blnOk=false;
  }

  if(blnOk) {
    with(document.body.style) {
      backgroundColor="#333";
      color="#FFF";
      marginTop="5.2em";
    }
      
    with(document.getElementById("access").style) {
      position="absolute";
      top="1em";
      left="1em";
      margin="0";
    }
      
    with(document.getElementById("texte").style) {
      margin="0";
      padding="1em";
      backgroundColor="#FFF";
      color="#333";
    }
    
    for(i=1;i<=3;i++) {
      with(document.getElementById("menu"+i).style) {
        position="absolute";
        top="3em";
        left=(((i-1)*11)+1)+"em";
        width="10em";
        height="1.2em";
        textAlign="center";
        margin="0";
        padding="0";
        zIndex="2";
      }
    }
    
    for(i=1;i<=3;i++) {
      with(document.getElementById("ssmenu"+i).style) {
        position="absolute";
        top="4.4em";
        left=(((i-1)*11)+1)+"em";
        width="12em";
        margin="0";
        padding="0";
        zIndex="3";
      }
    }
    
    with(document.getElementById("copy").style) {
      backgroundColor="#333";
      color="#FFF";
    }
    
    CacherMenus();
  }
}

function MontrerMenu(strMenu) {
  if(blnOk) {
    CacherMenus();  
    document.getElementById(strMenu).style.visibility="visible";
  }
}

function CacherMenus() {
  if(blnOk) {
    for(i=1;i<=3;i++) {
      with(document.getElementById("ssmenu"+i).style) {
        visibility="hidden";
      }
    }
  }
}
      

Explications

Voilà enfin la partie tant attendue. Nous avons 3 fonctions :

  • Chargement qui est appelée au chargement de la page grâce au onload sur le body ;
  • MontrerMenu qui affiche le menu dont le nom lui est passé en argument ;
  • CacherMenus qui cache les menus.

La première fonction met en place les éléments. On vérifie d'abord que le navigateur supporte les fonctions qui vont être utilisées. L'instruction with évite d'avoir à répéter le début des instructions. Si le navigateur passe les tests, on éloigne le texte du haut de l'écran afin de laisser la place pour le menu et de faire apparaître la couleur de fond de la page avec marginTop. Ensuite, on place la partie accessibilité et on met en forme le texte.

A ce stade, vous vous demandez peut-être pourquoi on utilise em comme unité. C'est simple : en faisant ainsi, on tient compte de la taille de la police choisie par l'internaute et notre page supportera un agrandissement harmonieux, la rendant ainsi accessible aux mal-voyants. Vous pouvez essayer de modifier la taille de votre police sur l'exemple. Elle se trouve généralement dans le menu affichage de votre navigateur.

La commande suivante mérite quelques explications. On utilise une boucle for afin de traiter les différents menus. C'est à cet endroit qu'il faudra changer le 3 suivant le nombre de menus que vous mettrez en place. Le petit calcul effectué nécessite aussi des éclaircissements. Le but est de positionner les menus tous les 11em, soit en laissant 1em entre chaque, puisqu'il en mesure 10. Le dernier 1 correspond au décalage par rapport au bord gauche. Nous procédons de la même manière pour les sous-menus. Notez au passage qu'ils mesurent 12em… de façon arbitraire.

Nous finissons en changeant les couleurs du bas de page et en cachant les sous-menus. Les deux autres fonctions vont respectivement montrer un sous-menu après avoir cacher les autres et tous les cacher.

Vous pouvez tester cette étape.

Oui mais…

Après avoir adapté ce menu à votre cas, vous vous rendez compte que si vous ajoutez une cinquième rubrique, par exemple, la page déborde en 640 par 480. Ah, si le menu était à la verticale… Très simple : il suffit de décaler le texte vers la droite et non plus vers le haut et de repositionner les éléments. Quelques lignes à changer dans le fichier menu.js et tout votre site change d'aspect.

if(blnOk) {
    with(document.body.style) {
      backgroundColor="#333";
      color="#FFF";
      marginLeft="12.2em";
    }
    
    with(document.getElementById("access").style) {
      position="absolute";
      top="8em";
      left="1em";
      width="10em";
      margin="0";
    }
    
    with(document.getElementById("texte").style) {
      margin="0";
      padding="1em";
      backgroundColor="#FFF";
      color="#333";
    }
    
    for(i=1;i<=3;i++) {
      with(document.getElementById("menu"+i).style) {
        position="absolute";
        top=(((i-1)*2)+1)+"em";
        left="1em";
        width="10em";
        height="1.2em";
        textAlign="center";
        margin="0";
        padding="0";
        zIndex="2";
      }
    }
    
    for(i=1;i<=3;i++) {
      with(document.getElementById("ssmenu"+i).style) {
        position="absolute";
        top=(((i-1)*2)+1)+"em";
        left="11.2em";
        width="12em";
        margin="0";
        padding="0";
        zIndex="3";
      }
    }
    
    with(document.getElementById("copy").style) {
      backgroundColor="#333";
      color="#FFF";
    }
    
    CacherMenus();
  }
    

Vous pouvez tester cette variante.

Conclusion

Nous venons de poser les bases d'un menu qui marche dans pratiquement tous les cas de figure. Pour information, il a été testé sur MSIE, les navigateurs basés sur Gecko (Mozilla, Netscape, Camino), Opera, les navigateurs basés sur KHTML (Konqueror, Safari) ainsi que sur des navigateurs texte ou adaptés aux handicapés. Et ceci sur Windows, Macintosh et Linux lorsqu'ils étaient disponibles.

Nous avons vu aussi qu'il était très simple d'adapter ce menu ou de le faire évoluer. Tout ceci est dû à une forte séparation entre les différentes composantes : le contenu, son rendu et son interactivité. L'emploi d'une CSS et d'un JS externes prouve ici toute leur souplesse et leur réutilisabilité.

Voici les divers éléments de cet article :

Pour utiliser la variante, il faut soit changer l'appel du script dans le head en menu2.js, soit renommer ce fichier en menu.js.

Note : —

Cet article a servi de base à de nombreux travaux dérivés. Celui-ci a particulièrement retenu mon attention et vous permettra d'aller plus loin dans la conception de menus dynamiques :

À propos de cet article

  • Openweb.eu.org
  • Profil : Débutant, Expert
  • Thème : Accessibilité, Pages dynamiques
  • Auteur :
  • Publié le :
  • Mise à jour : 24 mars 2009
  • 8 commentaires

Vos commentaires

  • onikuro Le 15 novembre 2010 à 15:47

    Bonjour,

    Je souhaiterai faire quelques modifications à votre page pour rajouter une bannière avant le menu, mais je n’y parviens pas. pouvez vous m’aider ?

    Cordialement,

  • Kiwiju Le 3 juillet 2011 à 20:05 En réponse à : onikuro

    Bonjour,

    votre question date mais peut-être que je suis votre sauveuse, celle qui va vous dire comment mettre une bannière dans tout cela.

    Avant les liens onload ; onmouseover ;onfocus, soit juste après l’ouverture de la balise , ajoutez (dans le code HTML ou xHTML) :

    div>

    Explication : vous venez de créer une div (un bloc) où il y aura votre image. Eh oui, il n’y a rien dedans, mais ne vous laissez pas avoir clin d'œil Ceci fait, allez dans votre fichier CSS et ajoutez :

    #banniere

    background-image : VOTREIMAGE.xxx ;
    blackground-repeat : no-repeat ;

    width : (si vous voulez choisir une largeur pour l’image) ;
    height : (si vous voulez choisir une hauteur pour l’image) ;

    margin-top : 10px ; (pour que la bannière ne soit pas collée au haut de la page, tout comme vous pouvez rajouter des marges en bas, à droite, à gauche)

    Explication : vous venez de mettre votre image !

    Voilà !

  • onikuro Le 30 août 2011 à 09:41 En réponse à : Kiwiju

    Bonjour,

    J’ai trouvé autre chose pour le projet que je faisait à l’époque, mais pour l’actuel, je me servirai de cette bannière. Merci donc !

    Cordialement,

  • daniel Le 15 septembre 2011 à 11:31 En réponse à : Kiwiju

    le menu dynamique me plaît et je voulais l’adapter à mon site mais lorsque j’édite dans notepad le menu ne répond pas.
    Je m’explique:sur votre site , quand la souris est sur le menu principal les sous menu apparaissent mais dans notepad lorsque j’enregistre et regarde le menu , rien ne se produit à l’approche de la souris.
    Comment faire ? Aidez moi svp

  • Fabrice Bonny Le 19 septembre 2011 à 14:38 En réponse à : daniel

    Bonjour,
    est-ce que votre code est visible en ligne ? Ce serait le plus simple pour pouvoir vous répondre.

  • Tatinox Le 8 juin 2012 à 12:01

    Bonjour à tous, et merci pour la qualité de ces pages.

    J’ai repéré ce qui peut être apparemment un bug sous Firefox 12 ; cela dit, ce bug est certainement déjà connu. S’il existe une solution, je suis preneur.

    code CSS :
    Bloc menu gauche, float left destiné à permettre le positionnement du bloc principal de texte.

    .menuG {
            .../....
            float:left;
           
    }

    code html :

    <div class="menuG">
                   
    <ul>
     <li><a href="Index2.php">Traitement</a></li>
     <li><a href="gestion.php">Gestion des Interventions</a>  </li>
    </ul>
    </div>

    Dans ce cas, FF ne prend pas en compte l’affichage du lien dans le html généré ; le source est en revanche bien formatté.
    Sous IE, pas de problème, le lien est bien pris en compte et généré...

    Extrait de l’accès à la mise en forme de la balise a :

    .menuG ul li a:link {
            display: block;
            /*padding: 10px;*/
            text-decoration: none;
           
    }

    Chers amis, une piste ?

  • Fabrice Bonny Le 13 juin 2012 à 11:17 En réponse à : Tatinox

    Bonjour, je suis tout d’abord fasciné que mon article suscite encore des commentaires près de 10 ans plus tard. grand sourire

    Après quelques investigations, je n’ai pas trouvé d’exemple de ce bug. Avez-vous tenté de supprimer ":link" de l’instruction CSS ? C’est un peu léger comme piste mais disons que c’est un début.

    Comme d’habitude, si c’est en ligne quelque part, n’hésitez pas à donner une URL.

  • Fabrice Le 21 juin 2012 à 09:51

    je me permets de poster aussi un commentaire avec 10 ans de retard, mais maintenant la solution est beaucoup plus simple avec HTML5 et CSS3 comparé à l’époque de publication de l’article... Mais déjà très précurseur pour un article de 2003, félicitations.

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom