Création d’un menu horizontale simple

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 :

Menu

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 ;
}

V. Couleurs du menu

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é

css

VII. Aperçu du menu

menucss3

Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Partager sur Google+ Envoyer par mail

Florian B.

Co-Fondateur d'IT-Connect, je souhaite partager mes connaissances et expériences avec vous, et comme la veille techno' est importante je partage aussi des actus.

florian has 1967 posts and counting.See all posts by florian

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

 

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.