Grâce au css il est possible de créer des menus très réussis qui ne pèseront que quelques octets sur vos pages.

Voici comment créer un menu horizontal:

Le code css est à insérer entre les balise <head> et </head> de votre page

css

<style type="text/css">

On ouvre la balise css.

css

body {
	color: #000;
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

On détermine la couleur la police et la taille du texte de notre document.

css

#navbar ul {
	border-top: 1px #596591 solid;
	padding: 0 0 1px 0;
}

- #navbar ul signifie que le style est appliqué à tous les <ul> de l'élément dont l'id vaut navbar.
- On applique une bordure supérieur de 1 pixel de couleur bleu (#596591) continu (solid).
- Padding: 0 0 1px 0 place les élements contenus dans les balises <ul> à 1 pixel du bord bas.

css

#navbar ul li {
	display: inline;
}

- #navbar ul li signifie que le style est appliqué aux <li> contenus dans les <ul>(voir plus haut).
- On créer des bloc alignés horizontalement.

css

#navbar ul li a {
	float: left;
	display: block;
	border: #596591 solid;
	border-width:0 1px 1px 1px;
	background-color:#F2F4FA;
	margin-left:4px;
	color:#596591;
	padding: 1px 8px 1px 8px;
	text-decoration:none;
}

- float: left; Place les éléments <a> à gauche. Lorsque Float est utilisé sans que la largeur soit précisée l'élement prend la taille minimale possible.
- dislay: block; créé un bloc.
- On applique ensuite des bordures droite bas et gauche à ce bloque.
- On lui donne une couleur de fond.
- margin-left:4px; applique une marge gauche de 4 pixel.
- padding: 1px 8px 1px 8px; Ecarte les éléments au dessus et en bas de 1pixel, à droite et à gauche de 8 pixel.
- On supprime la décoration standard des liens.

css

#navbar ul li a:hover {
	text-decoration:underline;
	border-color:#F39705;
}

- On modifie la couleur de la bordure et on rajoute un soulignement lorsque le lien est survolé.

css

</style>

- On referme le css.

La suite est à placer entre les balises <body> et </body> de votre page.

HTML

<div id="navbar">
	<ul>
		<li><a href="#">Accueil</a></li>
		<li><a href="#">Test1</a></li>
		<li><a href="#">Test2</a></li>
	</ul>
</div>

- <div id=“navbar”> On crée un div, identifié navbar, qui contiendra notre menu.
- <ul> On ouvre la balise <ul>
- <li><a href=”#”>Accueil</a></li> On crée notre premier bouton.
- On referme enfin les balises <ul> et <div>

Vous trouverez le fichier d'exemple ci-dessous:
menu_horizontal_css.htm

Chargement en cours...

Voici comment créer un menu horizontal:

Discussion