Création d'un menu CSS vertical imbriqué fonctionnant dans IE7

Question

En utilisant simplement CSS (et JS pour appliquer: styles hover), quelle est la meilleure façon de créer des menus imbriqués dans une liste déroulante horizontale?

J'essaie d'adopter les menus here, mais je ne peux pas obtenir le positionnement que je veux. Chaque fois que j'essaie cela, je finis avec tellement de cludge CSS que ce n'est plus gérable.

DOM:

<nav> 
    <ul> 
    <li> 
     <a href="#">Heading 1</a> 
     <ul> 
     <li><a href="#">1</a> 
       <ul><li>a</li><li>b</li></ul> 
     </li> 
     <li>2</li><li>3</li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Heading 2</a> 
     <ul><li>1</li><li>2</li><li>3</li></ul> 
    </li> 
</nav> 

sortie désiré:

Autrement dit, l'en-tête supérieur est entièrement horizontal, le premier menu sous chaque ligne d'en-tête à l'horizontale sur la gauche de l'en-tête et tous les autres sous-menus sont alignés horizontalement sur la droite et verticalement sur le dessus. Comment pourrais-je construire cette idée de base?

Answer 1

J'ai réussi à en créer un moi-même mais je ne suis pas sûr que ce soit assez bon ou pas. Je vous suggère plutôt de regarder la page jQuery UI Development & Planning Wiki > Menu. La page liste quelques menus.

Pour créer des menus déroulants qui pourraient servir de point de départ.

Modifier

Pour créer des menus dynamiques CSS popup, vous aurez besoin d'un soutien jQuery, principalement parce que (i) vous devez placer les sous-menus dynamiquement (ii) tirer parti des événements « hover » ce qui est impossible avec une solution CSS seulement.

1. Votre menu principal <ul> devrait être position: static
2. Toutes vos <li> qui contiennent un sous-menu doit être position: relative
3. Toutes vos sous-menu <ul> devrait être position: absolute et display: none.

Vous pouvez ensuite implémenter l'événement hover sur tous les éléments <li> qui contiennent un sous-menu. En survol, vous positionnez d'abord le <ul> qui est imbriqué directement dans le <li>, puis vous le montrez. L'événement hover fournit également un événement qui se déclenche lorsque cet élément est "désactivé". Dans cet événement, vous masquez simplement le <ul> correspondant. Facile?

Pour positionner le <ul> qui est un sous-menu, il suffit de prendre la largeur du contenant <li> et régler la left: XXXpx; top: 0 sur la <ul> que vous êtes sur le point d'afficher. Si le sous-menu doit apparaître sous le <li>, alors vous saisissez à la place la hauteur du <li> et définissez le left: 0; top: YYYpx sur le <ul>. La combinaison absolue-relative rend ce type de positionnement possible. À ce stade, vous pouvez également envisager la mise en œuvre de la «détection des contours» ... qui consiste à vérifier si le menu dépasse le bord droit ou inférieur du port d'affichage. Assez difficile.

Notez que dans IE7 aura des problèmes rendant les menus (et déclencher l'événement hover) correctement, bien que selon les spécifications HTML votre menu est OK. Pour contrer cela, vous pouvez définir des index z sur vos sous-menus.