Menu principal horizontal, sous-menu déroulant vertical

On retrouve souvent cette configuration pour les menus : le menu principal est horizontal et le sous-menu est affiché verticalement sous l’option de menu correspondante.

Avec cette configuration, la meilleure option consiste à faire dérouler un sous-menus lorsque la souris passe au-dessus d’une option du menu principal.

▼Publicité

Voici un exemple tiré d'un site Web maison :

La technique suivante permettant de programmer un tel menu. Elle fonctionne bien donc vous pouvez l’utiliser sans problème. Sachez cependant que plusieurs autres techniques peuvent être utilisées. Libre à vous d'explorer.

Si vous vous inspirez de code trouvé sur le Web, n’oubliez pas de spécifier vos sources… et vous devrez être en mesure d’expliquer chaque ligne de votre code.

Balises HTML

La structure des balises ressemblera à ceci. Notez qu’on utilisera une classe et non un id pour les sous-menus puisque plusieurs parties du code l’utiliseront (le id ne doit apparaître qu’une seule fois par page Web).

<div id="menu">

<ul>

<li><a href="page1.html">Menu 1</a>

<ul class= "sousmenu">

<li><a href="page1a.html">Sous-menu 1a</a></li>

<li><a href="page1b.html">Sous-menu 1b</a></li>

</ul>

</li>

<li><a href="page2.html">Menu 2</a>

<ul class= "sousmenu">

<li><a href="page2a.html">Sous-menu 2a</a></li>

<li><a href="page2b.html">Sous-menu 2b</a></li>

<li><a href="page2c.html">Sous-menu 2c</a></li>

<li><a href="page2d.html">Sous-menu 2d</a></li>

</ul>

</li>

<li><a href="page3.html">Menu 3</a>

<ul class= "sousmenu">

<li><a href="page3a.html">Sous-menu 3a</a></li>

<li><a href="page3b.html">Sous-menu 3b</a></li>

<li><a href="page3c.html">Sous-menu 3c</a></li>

</ul>

</li>

</ul>

</div>

Attention : prenez bien note que lorsqu'un menu contient un sous-menu, sa balise </li> doit être placée après le </ul> du sous-menu.

CSS

Voici les principaux aspects à prendre en considération pour monter ce type de menu :

  • On sait que la balise <li> génère par défaut un saut de ligne. Puisqu'on veut que le menu principal soit horizontal, on ajoutera l'instruction display:inline dans le CSS qui le définit.
  • Pour faire en sorte que les sous-menus soient déroulants, nous allons générer tous les sous-menus en HTML dès le départ mais ils seront invisibles. Aussi, pour assurer que le menu puisse se dérouler par-dessus d'autres éléments, il faut lui donner une position absolue.

    Ex : #menu .sousmenu

    {

    display: none;

    position: absolute;

    }

  • On ajoutera un état hoverdans la définition du menu principal afin de changer l'affichage du sous-menu.

    Ex : #menu li:hover > ul

    {

    display: block;

    }

    La ligne utilisant le signe > doit être interprétée comme suit :

    « Le style s'applique à un élément de sous-menu (ul). Cet élément doit être placé directement sous (>) une balise li sur laquelle la souris est pointée (hover), le tout étant placé dans un élément de sous-menu. »

  • Il faut spécifier que les éléments du sous-menu doivent être affichés l'un sous l'autre.

    Ex : #menu ul li ul li

    {

    display: block;

    }

  • Pour assurer que le sous-menu se déroule sous l'option de menu correspondante, on ajoutera un float: left; à #menu li et un float: none; à #menu ul li ul li. Au besoin, on ajustera le remplissage (padding) ainsi que les marges (margin) pour bien aligner le tout. Notez qu'il est possible de donner une valeur négative à une marge.
  • Si jamais le menu déroulant s’affichait derrière les images de la page Web, il peut s'agir d'un problème dû aux positions absolues. Jouez avec les z-index pour corriger la situation. Les éléments avec un z-index plus grand s’affichent par-dessus ceux avec un z-index plus petit.

Particularités avec Internet Explorer

Attention : la technique présentée ici ne fonctionnera pas avec un navigateur IE 6 ou moins.

Si vous travaillez avec une IE9 ou plus, assurez-vous de NE PAS ENFONCER l'icône « Affichage de compatibilité ». L'icône doit donc avoir l'apparence suivante : 

Si vous enfoncez l'icône de compatibilité, Internet Explorer affichera la page comme s'il s'agissait d'une ancienne version de IE. Attendez-vous donc à rencontrer des problèmes d'affichage si l'icône a l'apparence suivante

Pour plus d'information

« Votre menu déroulant en CSS ». 6 ma. http://www.6ma.fr/tuto/votre+menu+deroulant+css+2-399

« Des menus déroulants grâce aux CSS ». marcarea. http://www.marcarea.com/tuto/

« Menu déroulant en CSS - Menu hiérarchique vertical ou horizontal sans javascript ». CSS facile. http://www.css-faciles.com/menu-deroulant.php

« Menu horizontal déroulant en CSS ». CSS débutant. http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

« Créer un menu horizontal déroulant en CSS ». le site du zéro. http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories

9 commentaires

    • christiane

      Dans cet article, je n’ai traité que de l’affichage des options de menu. La création des pages, quant à elle, ne consiste qu’à créer le fichier .php dont le nom figure dans le menu. On prendra soin d’inclure le code d’affichage du menu dans le haut de cette page. La page d’un sous-menu est donc créée de la même façon qu’une page du menu principal. Est-ce que ça répond à votre question ?

  1. lacraz

    Bonjour,

    J’ai voulu suivre votre tuto pour l’installation d’un menu déroulant. Le sous menu est décalé sur la droit, il ne se met pas correctement en dessous du menu. Pouvez-vous m’aider?
    Voici le code CSS:
    .menu {
    list-style:none;
    width:101px;
    height:21px;
    margin:0;
    color: #FFF;
    }
    .menu li a {
    display:block;
    float:right;
    height:32px;
    width:141px;
    line-height:32px;
    color:#FFF;
    text-decoration:none;
    font-family:arial, verdana, sans-serif;
    text-align:center;
    font-size:14px;
    text-decoration:none;
    cursor:pointer;
    background-color: #333333;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 2px;
    }
    .menu li a b {
    float:right;
    display:block;
    padding-top: 0;
    padding-right: 2px;
    padding-bottom: 0;
    padding-left: 2px;
    }
    .menu li a:hover {
    color:#fff;
    text-decoration:none;
    background-color: #FF0A10;
    }

    .menu .sousmenu
    {
    display: none;
    position: absolute;

    }

    .menu li:hover > .sousmenu
    {
    display: block;

    }

    .menu .sousmenu li

    {
    float: none;
    display: block;
    }

    et voici le code HTML :

    Nos maisons

    Basses
    A étage

    Je vous remercie d’avance. Vos explications étaient claires pourtant !

    • Christiane Lagacé

      Bonjour,

      J’ai testé votre CSS et il ne manque que quelques petites choses, qui semblent être en lien avec le reste de votre code.

      Voici les éléments à modifier :

      – Si votre html a un <div id= »menu »>, Changer les .menu pour #menu (le point réfère à un class et le #, à un id).
      – Dans #menu, ajouter display:inline;
      – Ajouter une section #menu li avec comme règle : float: left;
      – Dans #menu .sousmenu, ajouter deux lignes : margin-top: 32px; et margin-left: -40px;

      Je n’ai pas eu accès à votre HTML mais avec le code que j’ai fourni dans mon billet, les tests sont concluants.

      Bonne chance !

    • Christiane Lagacé

      Bonjour,

      C’est le comportement de la balise <li> que nous désirons changer lorsqu’elle est utilisée dans la division du menu. On ajoutera donc l’instruction CSS suivante :

      #menu li
      {
      display: inline; /* sinon, chaque option de menu serait sur sa propre ligne */
      }

  2. bonjour,
    je crée un site web en novice pour une association de parents d’eleve. le site actuel comporte 3 frames comme vous le verrez
    Je modifie se site pour avoir un menu horizontal. donc je supprime les 3 frames, je garde le bandeau du haut et j’aimerais que la frame de choix se trouvant sur la gauche devienne un menu horizontal.
    Tout fonctionne a part que j’aimerais positionner mon menu horizontal sur toutes mes pages. pour le CSS ce n’est pas compliqué mais comment dois je positionner mes balises ul li ? dois je faire un copier coller sur toutes mes pages ? y a til un moyen de rappeler ces balises comme on le fait pour les CSS ?

    Merci
    Olivier

    • Christiane Lagacé

      Bonjour,

      D’abord, l’utilisation de frames pour monter un site Web est une technologie révolue. Vous souhaitez vous en départir : bravo !

      Votre site semble être écrit directement en HTML. Généralement, un site comportant plusieurs pages est écrit dans un langage comme PHP ou ASP.NET et c’est ce langage qui génère les balises HTML. Ceci permet de placer les balises communes à toutes les pages, comme par exemple les menus, dans un fichier commun qui sera intégré à chacune des pages en ayant besoin. On a donc l’impression qu’il y a eu un copier-coller du menu sur chaque page mais en réalité, c’est le langage de programmation Web qui a fait le travail.

      Plusieurs outils sont disponibles pour monter des sites Web plus ou moins évolués sans avoir à effectuer de la programmation Web. Si vous êtes novices, Wix est un outil intéressant. Si vous souhaitez aller plus loin, WordPress offre des fonctionnalités fantastiques.

      Bonne chance !

      Christiane

  3. bonjour

    mon site web est héberge chez un hébergeur ne permettant pas PHP malheureusement c’est la seconde raison pour laquelle je l’ai écrit en html
    La premiere etant que je ne connais pas php 🙂
    je pense a migrer le site chez moi. je pourrai alors etudier les langages plus sophistiqués

    merci de votre réponse
    Olivier