Concevoir un menu de
navigation
Objectifs du chapitre :
• Construire un menu horizontal et vertical en CSS
• Créer un menu sous forme de boutons
• Menu de navigation graphique
• Méthode des portes coulissantes
• Les Sprites CSS
• Les menus déroulants (mise en place et accessibilité), adaptation à un environnement tactile
C h a p it re 0 6
1. C ONSTRUIRE UN MENU EN CSS
Le menu doit guider et orienter efficacement à chaque instant, il sera donc accessible à tous les navigateurs, ce qui exclut les solutions complexes à base d’imbrications de tableaux, de langages comme JavaScript ou de plug-ins comme Flash.
Introduction
Le menu de navigation est généralement considéré comme une liste de liens, c’est donc la balise correspondant aux listes non ordonnées, <ul> qui est utilisée. L’emploi de CSS pour la mise en forme de menus produira un code simple et concis, dont il sera facile de modifier l’apparence sans intervenir sur la structure ou le contenu de la partie HTML.
Même sur les navigateurs en mode texte et autres programmes incapables d’interpréter le CSS (ou dont l’utilisateur a choisi de désactiver cette fonctionnalité), un menu programmé sous forme de liste apparaîtra clairement.
Menu de navigation de base :
<nav>
<ul id="navigation">
<li><a href="lien1.htm" title="section 1">Lien 1</a></li>
<li><a href="lien2.htm" title="section 2">Lien 2</a></li>
<li><a href="lien3.htm" title="section 3">Lien 3</a></li>
<li><a href="lien4.htm" title="section 4">Lien 4</a></li>
</ul>
</nav>
L’identifiant placé sur la balise <ul> distingue ce menu de navigation des éventuelles autres listes de la page web et permet d’accéder aux différents éléments du menu pour les modifier dans la feuille de style.
1. Créer un menu vertical
L’élément de liste <li>, de type bloc, adoptera par défaut un tel comportement. Il reste à supprimer les marges internes et externes de la balise <ul>, qui changent d’un navigateur à l’autre et risquent de poser des problèmes de compatibilité.
ul#navigation { margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;
}
La propriété list-style-type porte sur la représentation des puces. La valeur none les supprime:
ul#navigation { margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;
list-style-type: none;
}
Pour que les éléments du menu réagissent comme des boutons au passage de la souris, il faut faire en sorte que les liens occupent tout l'espace à l'intérieur des <li>:
#navigation li a { display: block ; background: #c00 ; color: #fff ; line-height: 1em ; text-align: center ; text-decoration: none ; padding: 4px 0 ;
}
Les pseudo-classes permettront d’embellir ce menu :
#navigation li a:hover, #navigation li a:focus, #navigation li a:active { background: #900 ;
text-decoration: underline ; }
/* focus désigne la mise en forme lorsqu’on pointe un élément via une navigation par clavier (touche Tab) et non au clic. Particulièrement pratique pour augmenter l’accessibilité des liens concernés. */
Aérer un menu de navigation
Il aurait été inutile d’appliquer une valeur de marge à nos liens dans le but de les aérer car il s’agit d’un élément en ligne et non de blocs. On pourrait par contre appliquer une marge au parent de l’élément <a>, soit <li>, qui est de type bloc.
2. Créer un menu horizontal
Pour disposer un menu horizontalement, nous pouvons faire « flotter » les éléments de menu (li) les uns à côtés des autres. En les positionnant en flottants à gauche, ils prennent place à la suite les uns des autres… tout en conservant leur structure de type bloc. Ceci leur permet de renfermer des liens convertis en blocs et dotés de dimensions.
#menu li { float: left;
}
#menu a {
display: block;
width: 120px;
border: 1px solid black;
color: green;
background: #fc0;
margin: 0 5px;
text-decoration: none;
text-align: center;
}
Au lieu d’appliquer la mise en forme aux éléments de la liste, on l’applique aux liens d’ancre à l’intérieur, grâce à quoi on obtient une meilleure compatibilité entre les navigateurs. Vous devez attribuer la valeur block à la propriété display des ancres de manière à leur attribuer une taille.
Soucis causés par les flottants
Si on insère du texte dans la page juste en dessous du menu et que celui-ci n'occupe pas toute la largeur, on observe que le texte vient se placer à côté du menu, au lieu de se placer en-dessous !
En effet, en utilisant la propriété float: left, on a sorti les <li> du flux de la page et ils n'interviennent dès lors plus dans le calcul de la hauteur de la liste <ul>. Comme celle-ci ne contient rien d'autre, sa hauteur est donc nulle.
De plus, des éléments flottants ne peuvent pas facilement être centrés … il est donc préférable d’opter pour la solution des inline-block.
3. display: inline-block
Les éléments de type block peuvent bénéficier de largeur (width) ou de hauteur (height) et les éléments de type inline se placent les uns à côté des autres, display: inline-block permet de cumuler les deux avantages.
Tout élément doté de la règle display: inline-block est considéré comme un texte de contenu et hérite de toutes les caractéristiques d’un élément inline (se place à côté de l’élément précédent et se positionne verticalement sur la ligne de texte), tout en bénéficiant d’une particularité inhérente aux éléments block : celle de pouvoir être dimensionné. En bref, il se comporte à la fois en block et inline, en adoptant des avantages de chacun.
a {
display: inline-block;
width: 500px;
background-color: #abc;
}
Rem : Cette propriété est parfaitement supportée à partir d’IExplorer 8.0 mais peut être appliquée sur un élément HTML de type inline depuis IExplorer 6.0.
2. C REER UN MENU SOUS FORME DE BOUTONS
On obtient l’effet recherché en attribuant aux liens hypertextes hauteur, largeur, bordure, effet d’ombre, arrondis, couleur de fond… L’élément <a> apparaîtra ainsi comme une forme carrée ou rectangulaire, cliquable.
#menu a {
display: block;
width: 120px;
height:25px;
line-height: 25px;
text-align: center;
text-decoration: none;
margin: …;
padding:…;
color: …;
border: …;
background:…;
}
2.1. Dimensions des boutons du menu
Les éléments du menu (<a>) sont en ligne, il ne peut donc pas recevoir des dimensions (Il n’occupe que l’espace nécessaire au texte qu’il contient), la déclaration display: block attribue la propriété de bloc à ces liens et permet donc de leur attribuer des dimensions.
line-height pour contrôler la hauteur du bouton au lieu de la propriété height permet de centrer verticalement le texte dans le bouton.
2.2. Produire un effet de relief sur les boutons
Jouer sur les teintes des différents côtés des boutons assure l’effet de relief ; les inverser donnera l’impression de profondeur d’un bouton poussé.
Pour créer l’effet de biseau sur les éléments de menu, vous devez attribuer à la bordure supérieure une couleur plus claire que la couleur d’arrière-plan et à la bordure inférieure une couleur plus sombre.
3. M ENU DE NAVIGATION GRAPHIQUE
Utiliser des images d’arrière-plan permet des boutons plus sophistiqués. Nous pouvons créer trois images de bouton : une pour l’état par défaut, une autre pour l’état de survol et le focus et une dernière pour l’état actif. Le code ressemble à celui employé pour des couleurs d’arrière-plan, on utilise simplement des images d’arrière-plan au lieu des bordures et des couleurs :
a:link, a:visited { display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
/* pour faire disparaître le texte du bouton, si le texte doit rester apparent sur l’image de fond, ce tag de style disparaît*/
background: url(img/button.png) left top no-repeat;
}
a:hover, a:focus {
background-image: url(img/button-over.png);
}
a:active {
background-image: url(img/button-active.png);
}
Remarque concernant les menus de navigation horizontaux flottant
Pour afficher une liste horizontalement, nous pouvons faire flotter à gauche les éléments de liste : ul. nav li {
float: left;
}
Lorsqu’un élément flotte, il ne prend plus d’espace dans le flot du document. Sa liste parente n’a donc plus de contenu, s’effondre et l’arrière-plan de la liste disparaît. La solution est, alors, d’ajouter à la liste une propriété d’overflow:hidden :
ul.nav { margin: 0;
padding: 0;
list-style: none;
width: 72em;
overflow: hidden; /*pour étirer */
background: #FAA819 url(img/mainNavBg.gif) repeat-x;
}
La valeur hidden est attribuée à la propriété overflow de la liste de navigation afin d’ouvrir un dégagement pour tous les éléments flottants qui y sont inclus.
4. M ETHODE DES PORTES COULISSANTES ( OU METHODE P IXY 1 )
L’inconvénient avec les images multiples est le léger délai lorsque les navigateurs chargent l’image de survol la première fois. La méthode des portes coulissantes consiste à utiliser une seule image d’arrière-plan combinant tous les effets du bouton et de décaler sa position pour faire apparaître l’un ou l’autre fond.
Nous avons créé ici une seule image combinant l’état relevé, un état de survol et un état actif. Le code est presque identique à l’exemple précédent, mais cette fois, vous alignez l’image d’arrière-plan de façon à ce que l’état normal se trouve au centre, puis vous décalez l’arrière-plan vers la droite ou vers la gauche pour les états de survol et actif : a:link, a:visited {
display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
background: url(img/buttons.png) -203px 0 no-repeat;
/*décalage de l’image de fond pour placer le centre de l’image en fond*/
}
a:hover, a:focus {
background-position: right top;
/*la partie droite de l’image est maintenant apparente*/
}
a:active {
background-position: left top;
/*la partie gauche de l’image est maintenant apparente*/
}
Cette méthode vise donc à réduire le nombre de requêtes en incluant tous les états du bouton dans une unique image.
5. L ES S PRITES CSS
Comme la méthode Pixy (portes coulissantes), les sprites CSS consiste en une image unique contenant une multitude d’icônes, de boutons et d’autres images afin de limiter le nombre de requêtes posées au serveur. Yahoo, Google, Amazone notamment utilisent cette technique.
De plus, dans le cas d'un élément qui change d'image au survol, vous êtes certain qu'il n'y aura pas de latence au moment du survol : le site n'aura pas à aller demander l'image et à la charger, puisqu'elle a déjà été chargée et mise en cache.
Lecture Web :
http://www.pixelcrea.com/blog/sprites-css/ bonne introduction à cette notion
http://www.pompage.net/pompe/sprites/ et http://www.alsacreations.com/tuto/lire/1068-sprites-css-background- position.html explique en détail l’intérêt et la mise en application des sprites CSS
http://draeton.github.com/stitches/ et http://www.spritecow.com/ nous proposent des interfaces conviviales pour générer nos sprites
