Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un menu horizontal avec Expression Web

Par tannoy (Antony Chauviré), le 02 juin 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 liste

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.

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

Il existe plusieurs méthodes pour créer une liste dans Expression web. Nous allons dans un premier temps, saisir sous forme de paragraphes distincts, les différentes rubriques du menu.

Nous allons ensuite sélectionner les 5 paragraphes et nous allons les transformer en une liste en cliquant sur le bouton

Création des liens

Nous allons créer les liens sur chaque rubrique du menu. Pour créer un lien, nous allons sélectionner le texte puis faire un clic sur le bouton droit et choisir l’option Lien Hypertexte.

Dans la zone adresse, nous saisissons l’url de la page liée.

Nous utiliserons ces 5 adresses :

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

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. Pour cela, nous allons cliquer sur l’icône Nouveau Document

Enregistrez le fichier sous le nom : menu.css

Liaison entre le document HTML et le document CSS

Dans le fichier HTML, nous allons cliquer sur le bouton Attacher une feuille de style du panneau Gérer les styles

En cliquant sur le bouton Parcourir, nous allons sélectionner notre fichier CSS

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 en sélectionnant la liste et en indiquant le nom de l’id dans le panneau Propriétés de la balise.

Nous allons maintenant créer une règle CSS pour définir les propriétés de la liste.

Nous allons cliquer sur le bouton « Nouveau style » et définir comme sélecteur 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.

La couleur d’arrière-plan du menu sera défini dans la catégorie Arrière-plan et c’est un bleu qui sera choisi.

Nous allons ensuite supprimer les puces devant les items de la liste. Pour cela, nous allons utiliser la propriété list-style-type de la catégorie Liste

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, de la catégorie Disposition, 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 dans la catégorie Encadré en précisant les propriétés margin-left et margin-right.

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.

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.

Aérer le menu

Afin d’aérer le menu, nous allons ajouter un padding à notre sélecteur ul#menu.

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