Menu de navigation

Généralités

Ce site ne dispose pas d'un contenu très foisonnant, aussi il n'y a pas plus de 2 niveaux au maximum. En conséquence, une navigation avec uniquement les catégories principales suffit !

Le contenu est intégré au sein du nouvel élément HTML 5 nav, qui est tout indiqué dans ce cas :)
Les options de menu sont contenues dans une liste UL/LI.

<nav>

<ul>

<li>
<a href="..." id="menu_accueil">
<span class="menu_icon"></span> Accueil</a>
</li><li>
<a href="..." id="menu_info">
<span class="menu_icon"></span> Informatique</a>
</li><li>
<a href="..." id="menu_zicmue">
<span class="menu_icon"></span> Musiques</a>
</li><li>
<a href="..." id="menu_moi">
<span class="menu_icon"></span> Moi</a>
</li><li>
<a href="..." id="menu_liens">
<span class="menu_icon"></span> Liens</a>
</li>

</ul>

</nav>

Positionnement

Je souhaitait un menu affiché en bas et fixe. Deux solutions pour obtenir cet effet :

• des frames : énormément d'inconvénients (principalement autour de l'url figurant dans le navigateur qui est celle du frameset), pour un avantage minime !
• du positionnement CSS avec position: fixed

C'est donc évidemment la 2ème solution que j'ai retenue ! Malheureusement au moment de la mise en place le support était assez restraint, j'avais alors utilisé le polyfill JavaScript IE7. Lors des mises à jour de août 2014 j'ai jugé qu'il n'était plus nécessaire et l'ai supprimé (comme on le voit sur caniuse.com le support est bon sur une grande majorité de navigateurs).

Pour séparer le menu du reste de la page, une bordure particulière est appliquée (la liste des styles de bordure dans la recommandation), avec un border-radius pour créer un arrondi en haut :

border-top: 1px dashed black;
border-radius: 10% 10% 0px 0px / 1em 1em 0px 0px;

Egalement un fond différent est appliqué, et une opacité de 0.85.

Liens

Afin de pouvoir appliquer des margin/padding aux liens, on leur ajoute un display: inline-block;.

nav a
{
display: inline-block;
margin: 0 0.5em;
padding: 0.5em 1em;

border: 1px solid transparent; /* car on a 1px gray sur :hover */

font-size: 0.9em;
text-decoration: none;
}

Afin de séparer les rubriques, j'ai opté pour l'insertion du caractère U+27A6 par CSS avec :before.
Code utilisé :

nav a:before
{
content: "➦"; /* U+27A6 Heavy black curved upwards and rightwards arrow (Dingbats) */
}

Remarque : mon fichier CSS est enregistré et servit en UTF-8, aussi pas de soucis pour y inclure directement le caractère voulu. Si ça n'avait pas été le cas il aurait toujours été possible d'inclure le caractère par l'échappement \27A6 comme l'indique la recommandation.

:hover

Un petit effet graphique est ajouté au survol de chaque rubrique, en utilisant le style de bordure outset.
Attention ! Pour ne pas provoquer de décalage, il est nécessaire de positionner une bordure de même dimension sur le a !

nav a
{
/* ... */
border: 1px outset transparent; /* car on a 1px gray sur :hover */
}

nav a:hover
{
background-color: white;
border-color: gray;
border-radius: 5px;
}

Création le 13/08/2014
Dernière mise à jour le 04/09/2014

Un oubli, une erreur, une suggestion ? N'hésitez pas à me contacter sur pgoiffon -at- free.fr