Comment réaliser en HTML et CSS des menus horizontaux déroulants

Notion de menus déroulants

Quand une page contient de très nombreux liens il est préférable que ceux-ci soient par défaut masqués sinon le visiteur sera perdu ...
La technique consiste à regrouper les liens en différents menus répartis horizontalement. Lorsque l'on survole un menu alors les liens qu'il contient apparaissent ; on dit que le "menu se déroule".

En se déroulant le menu doit recouvrir la boîte en dessous et non pas la repousser. Il faut donc positionner les grandes divisions avec positon : absolute et gérer l'ordre d'apparation de boîtes qui se superposent (z-index). Exemple !

Le code HTML correspondant à l'exemple

<body> <header> <h1>CSS : menus horizontaux déroulants</h1> </header> <nav> <div> <h2><a href ='#' >accueil</a></h2> </div> <div> <h2>Qui sommes nous ?</h2> <a href ="#" >lien11</a> <a href ="#" >lien12</a> <a href ="#" >lien13</a> </div> <div> <h2>Nos produits</h2> <a href ="#" >lien21</a> <a href ="#" >lien22</a> <a href ="#" >lien23</a> </div> <div> <h2>Nos magasins</h2> <a href ="#" >lien31</a> <a href ="#" >lien32</a> <a href ="#" >lien33</a> </div> <div> <h2>Nos usines</h2> <a href ="#" >lien41</a> <a href ="#" >lien42</a> <a href ="#" >lien43</a> </div> </nav> <article> <p>Ex turba vero imae sortis et paupertinae in tabernis ... ...

Il n'y a aucune difficulté. J'ai utilisé les nouvelles balises structurantes proprosées par la version 5 de HTML : header, nav, article, etc.
Chaque menu (contenenant des liens) est une boîte DIV dans le conteneur NAV.
Chaque boîte DIV contient un titre de menu (balise H2) et des liens.

Le code CSS (extrait)

*{margin : 0px ; padding :0px ; font-size :14px ; } body {position : relative ; width : 100% ; height : 700px ; margin : 10px auto 10px auto ; border : 1px solid black ; } header, nav, article{width : 100% ; position : absolute ; } header {top : 0px ; left :0% ; } nav {top : 60px; left : 0% ; z-index :2 ; } article {top :200px ; left :0% ;z-index :1 ; } nav div {display : inline-block ; width : 18%; height : 60px ; background : grey ; overflow : hidden ; vertical-align : top ; margin-left : 1%; } nav div h2 {height : 60px ; line-height : 60px ;} nav div a {display : block ; height : 30px; text-decoration : none ;padding-left : 5px ; } nav div:hover {background :pink; height : auto ;} nav div a:hover {color: purple ; font-size : 150%; } ...

Examinons ce code !

body {... ; position : relative ; margin : 10px auto 10px auto ; }: la page est centrée dans l'écran.

header, nav,article{position : absolute ; ... } : comme leur boîte parente (BODY) est "positionnée" (emploi de la propriété position avec valeur fixed/relative/absolute) les valeurs de top et left font référence au coin haut gauche de la boîte parente (et non pas de l'écran).

nav div {display : inline-block ; height : 60px ; overflow : hidden ; ...} : les différents menus se positionnent côte à côte. Par défaut la hauteur de chaque menu est de 60px (qui est aussi la hauteur du titre du menu) et comme la propriété overflow est à hidden seul s'affiche par défaut le titre du menu !

nav div:hover {height : auto ; ...} : si survol du menu alors la hauteur est ajustée au contenu donc les liens s'affichent. On dit que "le menu se déroule".
Comme le conteneur NAV a un z-index de 2 alors que ARTICLE a un z-index de 1, le menu se déroule au dessus de la boîte ARTICLE !
La boîte ARTICLE n'est pas poussée vers le bas car elle est positionnée en absolu !

Des menus déroulants peuvent aussi être réalisés en Javascript et plus précisément avec le framework Jquery
Il y a dans ce site un tuto Javascript & Jquery.
Retour menu