Le programmeur otaku: Menu horizontal avec HTML 5

Le but de l'article d'aujourd'hui est de voir si on peut utilisé la nouvelle balise <nav> de HTML 5 pour créer un menu horizontal compatible avec les navigateurs récents et les anciens Internet Explorer.

Donc pour la version 1, commençons par une petite page de test très simple.

<!DOCTYPE html>
<html>
<head>
   <title>Test <nav> HTML5</title>
   <link rel="stylesheet" type="text/css" media="screen" href="../../Styles/Base.css" />
   <style type="text/css">
       /* nav layout (horizontal menu) */
       nav {margin:1em 0; line-height:2em;}
       nav a {display:inline-block; padding:0 10px;}

       /* nav design */
       nav {background:#333333; border:1px solid black;}
       nav a {color:#cccccc; border-right:1px solid #cccccc;}
       nav a:hover {background:#666666; color:#ffffff;}
   </style>
</head>
<body>
   <h1>Test <nav> HTML5</h1>

   <div>Texte avant le menu</div>

   
   <nav>
       <a href="#">Page 1</a><a href="#">Page 2</a><a href="#">Page 3</a><a href="#">Page 4</a><a href="#">Page 5</a>
   </nav>

   <div>Texte après le menu</div>
</body>
</html>

Chrome 16

Firefox 8

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6

Donc après les tests de la première version, on se rend facilement compte que les anciens Internet Explorer n'applique pas le CSS que j'ai mis sur la balise <nav>.

Donc pour la version 2 je vais esayer d'intégrer un plugin JavaScript dont j'avais entendu parler sur le Web : html5shiv. Ce plugin est sensé améliorer la compréhension des balises HTML 5 pour les vieux Internet Explorer.

<![endif]-->

</head>
<body>
    <h1>Test <nav> HTML5</h1>

    <div>Texte avant le menu</div>

    
    <nav>
        <a href="#">Page 1</a><a href="#">Page 2</a><a href="#">Page 3</a><a href="#">Page 4</a><a href="#">Page 5</a>
    </nav>

    <div>Texte après le menu</div>
</body>
</html>

Chrome 16

Firefox 8

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6

Après les tests de la deuxième version avec html5shiv, on voit que les vieux Internet Explorer applique maintenant mon CSS appliquer sur la balise <nav>.
Mais contairement aux navigateurs récents qui semble interpréter par défaut la balise <nav> comme un élément "block", les vieux Internet Explorer semble interpréter la balise <nav> comme un élément "inline-block".

Donc pour la version 3, je vais ajouter une spécification dans mon CSS pour afficher la balise <nav> comme un élément "block" dans tout les navigateurs.

<!DOCTYPE html>
<html>
<head>
   <title>Test <nav> HTML5</title>

    <link rel="stylesheet" type="text/css" media="screen" href="../../Styles/Base.css" />
    <style type="text/css">
        /* nav layout (horizontal menu) */
        nav {display:block; margin:1em 0; line-height:2em;}
        nav a {display:inline-block; padding:0 10px;}

        /* nav design */
        nav {background:#333333; border:1px solid black;}
        nav a {color:#cccccc; border-right:1px solid #cccccc;}
        nav a:hover {background:#666666; color:#ffffff;}
    </style>

    
</head>
<body>
    <h1>Test <nav> HTML5</h1>

    <div>Texte avant le menu</div>

    
    <nav>
        <a href="#">Page 1</a><a href="#">Page 2</a><a href="#">Page 3</a><a href="#">Page 4</a><a href="#">Page 5</a>
    </nav>

    <div>Texte après le menu</div>
</body>
</html>

Chrome 16

Firefox 8

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6

Après trois versions, le rendu semble être assez similaire dans les navigateurs récents et les vieux Internet Explorer.

Voici quelques liens utiles :

Le programmeur otaku

vendredi 9 décembre 2011

Menu horizontal avec HTML 5

Aucun commentaire:

Publier un commentaire