Création d’un menu horizontale simple
Sommaire
I. Présentation
Ce tutoriel a pour but de vous aider dans la création d'un menu horizontale de manière simple, avec seulement du HTML et quelques propriétés CSS à affecter à des éléments de votre page.
II. Code de base
Dans un premier temps, constituez votre menu de la manière suivante :
Remplacez les "#" par le lien menant à votre page.
Vous obtiendrez ceci :
- Accueil
- Fiches
- Lexique
- Forums
Ensuite, dans le HEAD de votre page, ouvrez une balise style pour y insérer propriétés CSS, ou mettez les propriétés directement dans votre feuilles de style si elle est déclarée dans votre page.
III. Personnaliser les puces
On définit des propriétés pour les puces contenues dans la div menu.
Tout d'abord une couleur de fond de nos puces (background), qu'elles utilisent aucun style de liste c'est à dire, par défaut, les "ronds" (list-style). Ensuite, une couleur de police (color), puis, très important, on indique qu'on affiche les puces en ligne (display). Et pour finir, on met une petite marge à droit pour espacer les puces et rendre le menu plus clair (margin-right).
#menu li {
background: #012B55 ;
list-style: none ;
color: #fff ;
display: inline ;
margin-right: 1px ;
}
IV. Personnaliser les liens
On définit des propriétés pour le lien contenu dans chaque puce.
Elles correspondent respectivement à ceci :
- text-decoration:none : Enlever le soulignement sous les liens.
- text-align:center : Centrer le texte dans les puces.
- background : Couleur de fond.
- border: On définit une bordure, d'épaisseur 1 pixel, de trait continu et de couleur #012B55
- font-weight:bold : On écrit le texte en gras.
- line-height: Epaisseur de la ligne.
- padding:5px 40px : Espace interne de 5 pixels entre le texte et le haut ainsi que le bas, et de 40px entre le texte et la gauche et la droite.
#menu li a {
text-decoration: none ;
text-align: center ;
background: #012B55 ;
color: #fff ;
border: 1px solid #012B55 ;
font-weight:bold;
line-height: 1em ;
padding: 5px 40px ;
}
On change la couleur de fond du menu au passage de la souris et lorsque l'utilisateur clic sur un des éléments.
#menu li a:hover, #menu li a:focus, #menu li a:active {
background: #024282 ;
}
VI. Résumé
