[Résolu] [html5] - balises NAV imbriquées ?

Bonjour à tous,

J'aurai besoin si possible d'un petit éclaircissement. Je me mets progressivement à l'HTML5, mais je suis bloqué à un niveau, je m'explique :

Auparavant, pour créer des menus avec sous menus, je procédais ainsi :

<ul>
   <li><a href="#">lien 1</a></li>
   <li>
      <a href="#">lien 2</a>
      <ul>
         <li><a href="#">sous lien 1</a></li>
         <li><a href="#">sous lien 2</a></li>
      </ul>
   </li>
</ul>

J'utilisais ensuite un peu de JS pour afficher le sous menu correspondant avec la commande :

nav.find("a").each(function() {  
        if ($(this).find("ul").length > 0) { ...

Mais désormais, je suis parti sur la balise <nav>, avec juste des balises <a> à l'intérieur. Comment gérer ce sous menu ? Suis-je obligé de repasser par des listes imbriquées ?

J'étais parti pour faire ça :

<nav>
   <a href="#">Lien 1</a>
   <a href="#">Lien 2</a>
   <ul>
      <li><a href="#">Sous menu 1 de lien 2</a></li>
      <li><a href="#">Sous menu 1 de lien 2</a></li>
   </ul>
</nav>

... mais je n'arrive pas à récupérer correctement cet <ul> après le <a> correspondant.


Merci à vous pour votre solution ou vos pistes !
Modifié par fvsch (06 Oct 2011 - 16:10)

Salut,

Le fait d'utiliser l'élément <nav> ne t'interdit pas d'utiliser des listes non-ordonnées imbriquées pour construire ton menu, au contraire

<nav role="navigation">
   <ul>
      <li><a>Lien 1</a></li>
      <li>
        <a>Lien 2</a>
        <ul>
           <li><a>Sous-lien 1</a></li>
           <li><a>Sous-lien 2</a></li>
           <li><a>Sous-lien 3</a></li>
        </ul>
      </li>
      <li><a>Lien 3</a></li>
   </ul>
</nav>

Modifié par audrasjb (03 Oct 2011 - 08:54)

Bonjour,

pit07 a écrit :
Mais désormais, je suis parti sur la balise <nav>, avec juste des balises <a> à l'intérieur.

Voilà l'erreur.

Tu peux tout à fait garder ta structure de listes imbriquées pour ton menu, elle reste pertinente.
Si en plus tu veux indiquer au navigateur qu'il s'agit d'une section de navigation, tu as deux possibilités:
- Rajouter un attribut role="navigation" sur l'élément UL parent. C'est une information utile pour les lecteurs d'écran (spécification ARIA pour l'accessibilité des interfaces riches).
- Englober ton élément UL parent dans un élément NAV (HTML5).
Tu peux combiner ces deux possibilités. En HTML5, l'élément NAV a par défaut un role ARIA réglé sur "navigation", mais pour les lecteurs d'écran qui ont intégré le support d'ARIA 1.0 mais pas encore celui d'HTML5, on peut combiner ainsi: <nav role="navigation">...

Edit: grilled.
Modifié par fvsch (03 Oct 2011 - 09:09)

Merci à vous deux !

Je pensais que NAV permettait de s'affranchir des listes UL, je m'étais donc trompé.

Merci pour votre aide et vos explications !