RECHERCHE

Plan du site

Développeur

BOURSE

RUBRIQUES
 
 PRATIQUE CLIENTS WEB 
Un menu avec options verticales
 
"En CSS, comment construire un menu déroulant dont les options s'affichent à la verticale ?" (25/07/2006)

 

  Forum

Réagissez dans les forums de JDN Développeurs

Nous avions déjà abordé la construction d'un menu accompagné de sous-menus à partir d'une liste (lire notre article du 10/06/04). Les sous-menus, comme le menu lui-même, s'affichaient de manière horizontale. Pour les faire s'afficher de manière verticale, tout en conservant le menu horizontal, peu de changements sont nécessaires.

En ajoutant simplement la propriété display: block, nous faisons en sorte que ceux-ci s'affichent non plus l'un à côté de l'autre, comme c'est le cas pour le menu principal par le biais de display: inline, mais bien l'un au-dessus de l'autre, avec retour à la ligne en début et fin de chaque élément.

Par rapport à notre article précédent, les codes HTML et JavaScript ne changent pas, et la nouvelle CSS est comme suit :
  1. ul {
  2.     list-style-type: none;
  3.     margin: 0;
  4.     padding: 0;
  5.     }
  6.  
  7. ul, li {
  8.     position: relative;
  9.     width: 140px;
  10.     }
  11.  
  12. a {
  13.     display: block;
  14.     text-decoration: none;
  15.     padding: 5px;
  16.     }
  17.  
  18. li ul {
  19.     position: absolute;
  20.     left: 0;
  21.     top: auto;
  22.     }
  23.  
  24. li:hover a, li:hover li a:hover {
  25.     color: #fff;
  26.     background-color: red;
  27.     }
  28.  
  29. .menu {
  30.     position : absolute;
  31.     }
  32.  
  33. .menu ul {
  34.     float: left;
  35.     width: 140px;
  36.     border: 1px solid black;
  37.     }
  38.  
  39. .menu li {
  40.     display: inline;
  41.     }
  42. .menu a {
  43.     text-decoration: none;
  44.     color: #000;
  45.     }
  46.  
  47. #menu1, #menu2, #menu3, #menu4 {
  48.     position: absolute;
  49.     left: 0;
  50.     width: 140px;
  51.     display: none;
  52.     }
Pour fonctionner sous Internet Explorer, cette CSS nécessitera quelques hacks...

Démonstration complète :
 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page
 
 



Votre avis sur cette publicité