Cours de bureautique

CREATION DE SITE

Création de site - LES MENUS DE NAVIGATION

Des commandes CSS pour embellir vos menus

Dans vos fichiers html, les menus sont présentés sous formes de boites dans lesquelles on insère une liste de liens. Il existe même une balise <nav> pour cela.

Voici le code html type :

<nav>
<ul>
<li><a href="page1.html">Première page</a></li>
<li><a href="page1.html">Première page</a></li>
<li><a href="page1.html">Première page</a></li>
</ul>
</nav>

Les pseudo-classes

Afin d'embellir les menus, on utilise les "pseudo-classes" pour les liens hypertextes.
Quatre pseudo-classes principales peuvent être utilisées dans l'ordre précis qui suit, pour qu'elles soient bien prises en compte.

  • a:link pour les liens neufs qui n'ont pas été visités.
  • a:visited pour les liens visités
    Ces liens qui sont encore présents dans l'historique du navigateur, sont par défaut écrits en violet et soulignés.
  • a:hover pour le comportement du lien lorsque la souris le survole.
  • a:active pour un élément activé
    La souris pointant ce lien, son bouton est envoncé.

Pour utiliser ces pseudo-classes, on peut choisir de faire varier les couleurs, de faire varier les arrières-plan, les bordures, la typographie, etc...
Pour enlever les puces, on se servira de la propriété css : list-style-type: none;

La disposition du menu

Par ailleurs, pour que les menus forment une barre, lorsque l'on a inscrit son menu dans un bloc div identifié, et que chaque lien, en html, a été défini comme un élément d'une liste, on positionne son menu.
Lorsque l'on souhaite que le menu soit une barre horizontale de navigation, on fixera pour chaque élément "li" de la liste, un positionnement flottant à gauche. Pour cela on se servira en css du code suivant :
float : left;

On pourra ensuite s'occuper de l'homogénéité des "boutons" de liens en fixant également pour chaque li, les marges extérieures (margin) ou intérieures (padding).

Pour les menus verticaux, on fixera directement les dimensions des "boutons" avec les propriétés de largeur (width) et de hauteur (height).

copyright 2015 Eléonore Vieytes,
Tous droits de reproduction réservés