Créer un menu vertical simplement

Le menu HTML : une liste non ordonnée <ul>

Occupons-nous tout d’abord de construire un menu en HTML. Sa mise en forme au moyen d’une feuille de style CSS viendra plus tard.

La première étape consiste à dresser une liste non ordonnée <ul></ul>.

Afin de faciliter la mise en forme future du menu, cette liste sera identifiée dès à présent au moyen d’un attribut class="nav". Si ce menu est unique, il est également possible de l'identifier par l'attribut id="nav".

Chaque ligne du menu correspondra en réalité à un item de liste <li></li>.

Chaque item de liste comprendra un lien <a></a> vers la page web de votre choix.

Exemple :

<ul class="nav">
<li><a href="infos-pratiques.html">Infos pratiques</a></li>
<li><a href="cours.html">Cours</a>
<li><a href="tarifs.html">Tarifs</a></li>
<li><a href="plan-acces.html">Plan d’accès</a></li>
</ul>

Un sous-menu HTML : une liste imbriquée

Pour faire apparaître un sous-menu, il vous sera nécessaire de recourir aux listes imbriquées.

Un élément de liste <li> peut contenir différents types d’éléments (un paragraphe, un titre, une image etc.), et notamment une autre liste <ul>. Prêtez bien attention à l’ordre des balises : la balise de fermeture du sous-menu </ul> doit précéder la balise de fermeture de l’élément de liste </li> qui le contient.

Là encore, afin de faciliter la mise en forme future du menu, cette liste sera identifiée dès à présent au moyen de l'attribut class="nav2". S'agissant de sous-menus, et dans la mesure où il en existera probablement plusieurs, il est préférable de ne pas les identifier individuellement avec un attribut id.

Exemple :

<ul class="nav">
<li><a href="infos-pratiques.html">Infos pratiques</a></li>
<li><a href="cours.html">Cours</a>
	<ul class="nav2">
		<li><a href="debutant.html">débutant</a></li>
		<li><a href="intermediaire.html">intermédiaire</a></li>
		<li><a href="avance.html">avancé</a></li>
	</ul>
</li>
<li><a href="tarifs.html">Tarifs</a></li>
<li><a href="plan-acces.html">Plan d’accès</a></li>
</ul>

La mise en forme CSS du menu principal

Il convient au préalable de supprimer les puces de la liste non ordonnée grâce à la déclaration list-style-type : none et de préciser la largeur width du menu principal.

Il sera choisi ensuite de ne pas souligner les liens grâce à la déclaration text-decoration : none.

À vous enfin, de préciser la police utilisée, la taille de caractères font etc.

Les règles CSS applicables au menu principal .nav, à ses éléments de liste li et à ses liens a pourraient donc être les suivantes :

.nav {list-style-type: none ; width: 180px ;}
.nav li a {text-decoration: none ;  color: #000000; font-weight: bold;}
.nav li a:hover , .nav li a:active {color: #FF770A;}

La mise en forme CSS des sous-menus

Au préalable : le sous-menu étant inclus dans un item de liste <li> appartenant au menu principal, il hérite de certaines propriétés dudit menu principal, comme la largeur width, la police font, la couleur color etc. Il n’est donc pas forcément nécessaire de se répéter.

Pour distinguer le sous-menu du menu principal, il sera ajouté quelques autres propriétés, spécifiquement applicables seulement au sous-menu .nav2. Ainsi, il lui sera affecté une marge supérieure et inférieure margin ainsi qu’un retrait padding.

Exemple :

.nav2 {list-style-type :none ; margin: 0.2em 0; padding-left :1em;}

Signaler la page en cours du menu

Pour marquer la page en cours, il est possible de recourir à une troisième classe, la class="encours", applicable à l’item de liste concerné du menu ou du sous-menu. Le code HTML de votre menu en sortira légèrement modifié.

Exemple :

<li class="encours"><a href="tarifs.html">Tarifs</a></li>

À vous ensuite de modifier votre feuille de style CSS pour changer l’apparence de cet item de liste, en le mettant par exemple en gras et en rouge.

.encours {font: bold; color: #FF0000;}

Attention : Cette solution vous empêchera (en HTML pour le moins) de "copier-coller" votre menu d’une page web à l’autre, dans la mesure où le menu de chacune de vos pages web sera légèrement différent.

Un menu vertical CSS

Par défaut, les items de liste li composant votre menu, s’afficheront verticalement, vous n’avez donc en théorie rien à ajouter à la règle CSS .nav. Toutefois, afin d’uniformiser le rendu dans tous les navigateurs, il est préférable de donner une valeur nulle 0 à sa marge margin et à son padding.

La règle CSS deviendra donc

.nav {list-style-type: none ; width: 180px ; margin: 0; padding: 0;}

L'habillage CSS du menu

Vous disposez déjà d'un menu vertical. Tout dépend de vos choix en matière de conception graphique, mais vous pouvez souhaiter une plus grande intégration de votre menu dans votre page web. Parmi les solutions envisageables figurent:

Pour aller plus loin :

Bouton CSS (Openweb / Pascale Lambert-Charreteur)