Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un menu horizontal en XHTML-CSS

Compatible CSS. Cliquer pour en savoir plus sur les compatibilités.Compatible XHTML. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 09 juillet 2008

Nous allons voir à travers cet article, la création d’un menu horizontal en utilisant une liste non ordonnée, combinée à des propriétés CSS.

Création de la structure HTML du menu

Création de la structure de la page

Dans un fichier HTML, nous allons créer la structure globale de notre document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="menu.css" rel="stylesheet" type="text/css" media="screen" />
</head>
 
<body>
 
</body>
</html>

Afin de respecter la sémantique des éléments HTML, nous allons utiliser une liste non ordonnée pour créer notre menu. En effet, un menu, c’est une liste de liens donc nous allons utiliser l’élément HTML : ul.

Un liste est composé d’items, éléments li en HTML.

Notre menu sera constitué de 5 rubriques : Google, Yahoo, Mozbot, Ask et Exalead.

<ul>  <li>Google</li>
  <li>Yahoo</li>
  <li>Mozbot</li>
  <li>Ask</li>
  <li>Exalead</li>
</ul>

Création des liens

Nous allons créer les liens sur chaque rubrique du menu. Pour créer un lien, nous allons utiliser l’élément HTML a..

L’attribut href de l’élément a permet d’indiquer l’url du document lié.

Nous utiliserons ces 5 adresses :

<ul>
  <li><a href="http://www.google.fr">Google</a></li>
  <li><a href="http://fr.yahoo.com">Yahoo</a></li>
  <li><a href="http://www.mozbot.fr">Mozbot</a></li>
  <li><a href="http://fr.ask.com/">Ask</a></li>
  <li><a href="http://www.exalead.fr/search">Exalead</a> </li>
</ul>

La structure HTML étant créé, nous allons mettre en forme le menu avec des propriétés CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="menu.css" rel="stylesheet" type="text/css" media="screen" />
</head>
 
<body>
<ul>
  <li><a href="http://www.google.fr">Google</a></li>
  <li><a href="http://fr.yahoo.com">Yahoo</a></li>
  <li><a href="http://www.mozbot.fr">Mozbot</a></li>
  <li><a href="http://fr.ask.com/">Ask</a></li>
  <li><a href="http://www.exalead.fr/search">Exalead</a> </li>
</ul>
</body>
</html>

Création de la feuille de styles CSS

Création du fichier CSS

Nous allons créer un nouveau fichier CSS qui contiendra les différentes règles CSS. Le fichier portera le nom : menu.css..

Liaison entre le document HTML et le document CSS

Dans le fichier HTML, nous allons créer une liaison entre le document XHTML et le fichier CSS en utilisant l’élément HTML link.

Cet élément permet d’effectuer différents types de liaison donc nous allons préciser via l’attribut rel qu’il s’agit du lien vers une feuille de styles (stylesheet). L’attribut href nous permettra de définir l’url du fichier CSS. L’attribut media nous permettra d’indiquer que la feuille de styles sera utilisée à l’écran.

L’élément link sera placé à l’intérieur de l’élément head.

 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Document sans nom</title>
	<link href="menu.css" rel="stylesheet" type="text/css" media="screen" />
</head> 

Définir les propriétés CSS de la liste

L’élément HTML utilisé pour la liste est un élément ul. Afin de ne pas définir la même mise en forme pour toutes les listes, nous allons identifier de façon unique notre menu. Nous allons pour cela attribuer un attribut id à notre élément ul .

 <ul id="menu">

Nous allons maintenant créer une règle CSS pour définir les propriétés de la liste. Nous allons utiliser le sélecteur d’id : ul#menu.

En effet, nous souhaitons mettre en forme une liste ul dont l’id est menu. Ce sélecteur sera défini dans une feuille de style existante menu.css.

La liste utilisera la famille de police Verdana, Arial, Helvetica, sans-serif et une couleur blanche. Ce sont les propriétés CSS font-family et color qui nous le permettent.

La couleur d’arrière-plan du menu sera définie sur un bleu grâce à la propriété background-color.

Nous allons ensuite supprimer les puces devant les items de la liste. Pour cela, nous allons utiliser la propriété list-style-type avec une valeur none.

 ul#menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #0066CC;
	list-style-type: none;
} 

Définir les propriétés CSS des items de la liste

La liste, élément HTML ul, est constitué d’items, éléments HTML li. Les items représentent les lignes de la liste. Les éléments HTML li sont des éléments de type block, c'est-à-dire que par défaut, ils se positionnent les uns sous les autres. Nous allons donc créer une règle CSS qui va nous permettent de transformer les éléments li en éléments de type inline, éléments qui se positionnent les uns à côté des autres.

Nous allons utiliser un sélecteur contextuel afin de ne cibler que les éléments li qui sont dans un élement ul dont l’id est menu

Nous allons donner à la propriété display la valeur inline afin d’indiquer que les items de la liste doivent s’afficher les un à côté des autres.

L’espacement entre les liens va être gérer en précisant les propriétés margin-left et margin-right.

 ul#menu li {
	display: inline;
	margin-right: 15px;
	margin-left: 15px;
} 

Définir les propriétés des liens

Il nous reste maintenant à définir l’aspect des liens du menu. Nous souhaitons supprimer le soulignement des liens, les mettre en gras et leurs donner une couleur blanche. Nous allons donc là aussi créer un sélecteur contextuel afin de ne cibler que les liens du menu. La propriété text-decoration avec la valeur none permet de supprimer le soulignement.

 ul#menu a {
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
} 

Nous souhaitons modifier la couleur des liens lors du survol de la souris. Nous allons donc créer un sélecteur contextuel utilisant la pseudo-classe :hover qui permet de définir le survol d’un élément.

La couleur des liens sera le blanc.

 ul#menu a:hover {
	color: #0099FF;
} 

Aérer le menu

Afin d’aérer le menu, nous allons modifier notre sélecteur ul#menu. La propriété padding permet de définir un espace entre le contenu et la bordure. Cet espace est occupé par l’arrière-plan.

 ul#menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #0066CC;
	list-style-type: none;
	padding: 10px;
} 

Nous venons donc de créer un menu full CSS, qui respectent les standards du web