vendredi 9 décembre 2011

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 &lt;nav&gt; 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 &lt;nav&gt; HTML5</h1>
  
    <div>Texte avant le menu</div>
  
    <!-- Les sauts de ligne en commentaire sont placés pour corrigé un bug avec les inline-block
    http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ -->
    <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
Version 1 / 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.

<!DOCTYPE html>
<html>
<head>
    <title>Test &lt;nav&gt; 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>
   
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <h1>Test &lt;nav&gt; HTML5</h1>
   
    <div>Texte avant le menu</div>
   
    <!-- Les sauts de ligne en commentaire sont placés pour corrigé un bug avec les inline-block
    http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ -->
    <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 &lt;nav&gt; 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>
   
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <h1>Test &lt;nav&gt; HTML5</h1>
   
    <div>Texte avant le menu</div>
   
    <!-- Les sauts de ligne en commentaire sont placés pour corrigé un bug avec les inline-block
    http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ -->
    <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 :

Aucun commentaire:

Publier un commentaire