Menu déroulant simple.

Ce menu très simple se base sur le fait que le sous menu se trouve dans une div juste après le lien qui doit l’ouvrir:

  1. <a class="optionLink">Menu 1</a>
  2. <div class="option">Sous menu 1 Sous menu 2</div>
  3. <a class="optionLink">Menu 1</a>
  4. <div class="option">Sous menu 1 Sous menu 2</div>
  1. .option {
  2.         display: none;
  3.         width: auto;
  4.         border: 1px #990000 solid;
  5.         padding: 10px 10px 10px 10px;
  6. }
  7.  
  8. .optionLink {
  9.         cursor: pointer;
  10.         width: auto;
  11.         display: block;
  12.         margin: 0 auto;
  13.         text-align: center;
  14. }

Il suffit ensuite de laisser javascript détecter quel menu doit être ouvert, et affiche la div:

  1. openMenu = function () {
  2.         // Lorsque l'utilisateur click sur le lien du menu.
  3.         $(".menuLink").live("click", function () {
  4.                 // On séléctionne la div du menu qui vient après le lien et on l'ouvre.
  5.                 $(this).next(".menu").slideToggle("slow");
  6.  
  7.                 return false;
  8.         });
  9. }

Laissez un commentaire