De plus en plus souvent, on peut observer des menus dynamiques - généralement déroulants - sur le web.
Ces menus sont habituellement générés grace à du Javascript.
Mais dans ce cas, son utilisation n'est pas obligatoire, et je dirais même qu'elle est déconseillé par le W3C.
Cependant, des alternatives existent.

Introduction

C'est vrai, le DHTML, ou plus moderne AJAX on le vent en poupe.
Il faut reconnaitre que c'est dingue ce qu'on peut faire avec des scripts clients.
Malgré cela, et bien que la période assez sombre ou le Javascript était systématiquement utilisé de la mauvaise manière, des vestiges persistent de cette époque.
Comme on peut le lire partout depuis quelques années, un bon Javascript est un Javascript accessible, sémantique, respectueux de l'utilisation, et surtout, non intrusif.
Dans cette optique, certaines choses sont à éviter.
Je ne les listerais pas ici, peut-être y consacrerais-je un autre article.
Pour en revenir à nos moutons virtuels, ces menus que l'on peut observer un peu partout sont quasi-systématiquement réalisés en Javascript, ceci, à tord.

Car non seulement, ce dernier est loin d'être obligatoire pour réaliser de si pratiques menus, mais surtout, cela peut rapidement devenir gênant pour l'utilisation, dans certains cas.
Imaginons que l'internaute ai désactivé le Javascript de son navigateur, ou bien tout simplement que son navigateur n'utilise pas Javascript (comme par exemple des navigateurs de PDA, portables, etc).
Et bien notre internaute se retrouvera sans menu, et sans possibilité d'accéder aux sous-rubriques du dit menu.
Pour limiter la casse dans cette situation, on met alors un lien sur le bouton du menu, qui dirige vers une page contenu les sous-rubriques autrement inaccessibles.
C'est ce qui se fait quasi-systématiquement de nos jours.
Mais le fait est que d'un site et d'une navigation pensée pour tirer partit de sous-rubriques rapidement accessibles via des menu déroulant, on va tomber dans une navigation par pages successives loin d'être pratique.

Le problème est qu'actuellement, on trouve bien plus de développeurs DHTML (HTML et Javascript), que de développeurs portés sur l'accessibilité et le respect de standards (xHTML et CSS).
Certes, je schématise, mais dans l'idée, c'est ca.
Par exemple, voyez les menus de ce site, il n'y a pas le moindre Javascript dedans.
C'est uniquement du xHTML et du CSS.

Car ce dernier a beaucoup évolué en quelques années. Et son support également.
De nos jours, les navigateurs sont nombreux à supporter CSS2.1. Et le CSS3 arrivant à grand pas, la situation n'est pas prête de s'inverser.
Alors qu'autre-fois chaque navigateur y allait de sa pomme pour le mode de rendu des pages, actuellement, chacun est tenu de respecter les standards sous peine d'être mis sur la page.
Comme le non-regretté Internet Explorer.

Ce qui nous amène au seul réel problème des menus dynamiques CSS.
Réaliser ce genre de menu est finalement très simple, quand on en a pris l'habitude.
De mon point de vue, c'est même plus simple qu'en Javascript.
Un mais existe, hélas.
Ces menus passent très bien sur tous les navigateurs récents, mais des navigateurs obsolètes, comme Internet Explorer 6, nécessiteront un surplus de travail afin de rendre compatible les menus avec eux.
Actuellement, seul Internet Explorer peut le justifier, de par le nombre de personnes continuant à l'utiliser.
Cependant, les temps ont changés.
Alors qu'avant un site non compatible avec Internet Explorer faisait fuir les internautes potentiels, de nos jours, le vent a tourné, et cela obligera souvent les dit internautes à changer de navigateur.
Ne serait-ce que pour continuer à surfer.
Car il ne s'agit pas d'un site isolé, mais de nombreux sites qui sont tout bonnement incompatibles avec Internet Explorer 6.
Pour le 7, c'est une autre affaire.
Quoi qu'il en soit, que ce soit pour le 6 ou le 7, vous aurez de toute manière besoin de passer du temps supplémentaire pour garantir la compatibilité avec ces navigateurs, par conséquent, le faire également pour les menus, ne changera pas grand chose. Surtout sachant que même avec des menus Javascript, cela aurait probablement été nécessaire.
Ainsi, ce site n'est tout bonnement pas compatible avec Internet Explorer 6.
Premièrement, car je considère qu'un internaute est tenu de tenir à jour son matériel et son logiciel afin de rester à la page.
Et secondairement, car je possède actuellement IE7, et donc que je n'ai aucun moyen légal de tester la compatibilité avec ce navigateur.

C'est bien beau tout ca, mais comment qu'on fait un zouli menu en CSS ?

En réalité, c'est finalement assez simple, dès qu'on a compris la concept.
Déjà, plusieurs techniques existent.
On peut choisir de masquer une part de contenu précise.
Ou bien de jouer avec la taille du bloc du menu, en masquant uniquement ce qui dépasse du bloc.
Je ne vous parlerais ici que de la seconde méthode, qui - à mon avis - est la plus simple à mettre en place.

Comme mon grand père disait toujours (c'est quoi cette intro pourrie ? oO), un bon dessin vaut mieux qu'une longue explication :
Menu fermé
Menu ouvert

Le fonctionnement est assez simple, il s'agit d'un bloc menu, avec les propriétés CSS suivantes :
Code (CSS) .menu
{
height: 48px;
overflow: hidden;
}
Ici on définit une hauteur fixe au bloc menu et on masque le contenu qui dépasse.
Code (CSS) .menu:hover
{
height: auto;
}
Et ensuite, lorsque le bloc est survolé, on spécifie une hauteur automatique, qui ira toute seule s'agrandir tant que nécessaire pour que tout le contenu soit visible.
Il s'agit la uniquement de la base, vous serez probablement forcé de spécifier une largeur fixe (pour plus de commodité), ensuite il vous faudra jongler avec le reste de la structure du menu (par exemple avec une liste à puce pour le contenu du menu, comme ce site).
Je précise aussi que sur les images, il y a une énorme marge entre le bloc menu et son contenu, mais rien ne vous oblige à en mettre une. Vous pouvez très bien spécifier une marge de zero afin que le contenu du menu soit collé au bords du bloc.
Quitte à après spécifier un padding aux liens du menu (en orange sur l'image).

Maintenant pour la structure HTML, c'est assez simple :
Code (HTML) <div class="menu">
<h1>Menu</h1>
<ul>
<li>Lien 1</li>
<li>Lien 2</li>
<li>Etc</li>
</ul>
</div>
Ceci n'étant qu'un exemple, rien ne vous oblige à utiliser des listes à puce, ou encore un titre pour le bouton du menu.
En réalité, rien ne vous oblige à mettre un bouton de menu.
Vous pouvez tout à fait laisser vide (c'est au survol du div.menu que l'agrandissement du bloc s'effectue), mais dans ce cas, vos visiteurs pourraient avoir du mal à deviner qu'il s'agit d'un menu déroulant. ;)

Quoi d'autres ?

Pas grand chose, je vous ai donné ici la théorie, à vous de faire vos expérimentations, vous pouvez également ouvrir le code source de cette page et de la feuille de style du site afin de voir plus en détails un exemple concret de menu full CSS.

Bonne chance ! ^^

Ce site ainsi que tout son contenu est sous licence Creative Commons.
XHTML 1.0 | CSS 2.0 | Contact | Statistiques | Firefox | Fam³