Francisés sous le terme de menu déroulant surdimensionnée, un mega drop-down menu diffère des menus déroulant classiques, de par sa taille mais aussi par la façon de présenter la navigation, à l'image d'un plan de site volant : Le caractère hiérarchique limité à des catégories et à des sous-catégories qui s'emboîtent, laisse la place à une disposition plus gaie, avec un format sur plusieurs colonnes,  des icônes et des regroupements par catégories et par rubriques. En ce sens, les ergonomes louent l'utilisation de ce genre de menus riches alors qu'ils vouent toujours une haine tenace contre les menus déroulants basiques.

Pour concevoir les menus déroulant classiques, il existent de nombreux sites sur le net, voir des bibliothèques javascript qui émule complètement un menu, avec des paramètres à régler suivant que vous le voulez vertical ou horizontal. Vous trouverez moins de pages concernant la mise en place d'un menu riche, dont l'habillage va au-delà d'une simple case de tableau, mais les premiers tutoriels commencent à fleurir.

Une possibilité est de partir du principe de la conception de menus dits Suckerfish, une méthode qui date au moins de 2003. L'élégance est en fait de ne faire appel qu'à du CSS pour émuler un menu dynamique.

Le principe est simple: Vous créez votre barre de navigation à l'aide des balises <ul> et <li>. Un peu d'expérience en CSS vous permet de transformer la liste classique en une barre horizontal ou vertical, sans les puces, ni les décalages.  Vous placez ensuite vos menus dans des sous-listes, à l'aide d'une balise <ul> qui comporte une balise <li> pour chaque élément.

Par défaut vous faîtes en sorte que les instruction dans votre CSS place vos menus en dehors de la page. Ils deviennent ainsi invisibles.

Vous utilisez ensuite la priorité hover sur les éléments <li> de la barre de navigation. A chaque passage de la souris sur un élément de la barre, vous changez la position du menu fils attaché à l'élément pour qu'il vienne se repositionner dans la page, juste en dessous de l'élément survolé. Une fois que la souris n'est plus sur l'élément ou sur le menu, le menu disparaît.  Vous avez ainsi l'émulation d'un menu dynamique rien qu'en utilisant du CSS.

La méthode brute comporte quelques inconvénients. La propriété utilisée pour faire apparaître ou disparaître le menu de manière dynamique n'est pas active sous Internet Explorer, notamment IE 6, encore utilisé.

Deuxièmement,  même s'il est caché, le contenu textuel du menu est inséré dans la barre de navigation et ce n'est pas très bon pour le référencement si votre barre est a début de la page. Un moteur de recherche voit votre imposant menu, avant le véritable contenu, qui est la véritable valeur de votre page.

Enfin, ergonomiquement, il est conseillé d'insérer des temps de latence entre le mouvement de la souris et l'affichage ou la disparition du menu, pour éviter l'impression de scintillement ou que l'utilisateur ne se batte avec sa souris pour faire une sélection. En CSS, il n'y a pas de gestion de ce genre.

Ce que CSS ne peut pas faire, le Javascript peut le gérer. Pour éviter de réinventer la roue, vous pouvez employer la bibliothèque à la mode en ce moment, jquery. La syntaxe et la logique est un peu spéciale mais elle vous économise l‘écriture de plusieurs lignes de code, sans pour autant rajouter un énorme poids dans la page, car la bibliothèque de base est légère.

La première mission du code javascript est d'émuler la propriété hover sous IE6 et de capturer l'événement de passage de la souris sur les menus de la barre de navigation. Le hack consiste ensuite à assigner aux éléments menus enfants la classe CSS sHover, qui les fait apparaître à l'endroit voulu. Un click permet ensuite d'enlever ce style et le menu disparaît.

Jquery comporte ensuite une fonction pour extraire et copier des éléments HTML à la volée,  dans la page. Cela permet de placer la barre de navigation au début de la page, tout en conservant les menus tout à la fin et nous les recopions à l'initialisation du javascript dans la barre de navigation.

Enfin, pour l'ajout d'une temporisation, nous passons par une fonction dérivée de setTimeout(). Lorsque l'événement hover se produit, nous cachons immédiatement le menu, en contredisant ce qui est demandé dans le CSS, puis après un micro temps d'attente nous faisons apparaître le menu.

Dans le cas d'un menu à cacher, nous procédons dans l'ordre inverse en forçant son apparition immédiatement après le départ de la souris, puis il disparaît après quelques centaines de millisecondes.

J'ai ainsi inséré des menus  surdimensionnés à la page d'accueil du site Animint, avec quelques subtilités supplémentaires au niveau des feuilles de style, pour pouvoir utiliser des cadres à bords arrondis et transparents.