Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un menu sous forme de boutons avec Expression Web

Par tannoy (Antony Chauviré), le 03 juin 2008

Nous allons voir à travers cet article, la création d’un menu vertical sous forme de boutons 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

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 des liens

Il nous reste maintenant à définir l’aspect des liens du menu. Nous souhaitons afficher les liens sous la forme de boutons ayant la même largeur. L’élément HTML utilisé pour les liens est un élément a.

Les éléments HTML a sont de types inline, c'est-à-dire que par défaut, il est impossible de leur spécifier une largeur. Nous allons donc créer une règle CSS qui va nous permettent de transformer les éléments a en éléments de type block, éléments pour lesquels on peut définir une largeur.

Nous allons utiliser un sélecteur contextuel afin de ne cibler que les éléments a 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 block afin d’indiquer que les liens de la liste peuvent avoir une largeur définie.

Nous préciserons la largeur des liens dans la catégorie Position via la propriété width.

Nous définirons ensuite la couleur d’arrière-plan des liens.

Nous souhaitons aussi supprimer le soulignement des liens, les mettre en gras et leurs donner une couleur blanche.

La propriété text-decoration avec la valeur none permet de supprimer le soulignement.

Le texte des boutons (liens) sera centré sur la largeur du bouton. Nous allons donc définir dans la catégorie bloc, la propriété text-align sur la valeur center.

Nous souhaitons modifier la couleur d’arrière-plan 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

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 d’espacer les éléments.

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é margin-bottom, de la catégorie Encadré, la valeur 10px.

Nous venons donc de créer un menu CSS sous forme de boutons.