Les menus basés sur CSS basculent-ils simplement en affichage none/block et z-index?

Question

Juste essayer de comprendre comment faire dérouler les menus au travail (la théorie derrière eux). D'après ce que j'ai vu, il est juste de jouer avec CSS en utilisant display: none et block avec le z-index.

Les événements sont attachés sur mouseover et mouseout pour basculer la classe CSS.

Est-ce fondamentalement cela?

Answer 1

Les menus CSS peuvent également tirer parti de la propriété: hover sur la balise d'ancrage, qui fonctionnera de la même manière qu'un événement mouseover/mouseout. Editer: Je devrais probablement dire que la propriété: hover ne doit pas toujours être sur l'étiquette d'ancrage, mais elle est la plus largement utilisée.

Answer 2

Il existe une alternative où vous pouvez faire en sorte que la visibilité des éléments de menu dépende du style de survol de l'élément parent, par exemple.

li ul {display: none;} 
li:hover > ul {display: block;} 

cela signifie que vous pouvez faire des menus en utilisant simplement

<ul id="menu"> 
    <li> 
     some item 
     <ul><li>sub item</li></ul> 
    </li> 
    <li> 
     some other item 
    </li> 
<ul> 

Évidemment, vous aurez envie de jeter plus de style, et les classes, etc pour l'empêcher d'appliquer à toutes les listes, mais qui est le général concept derrière un menu CSS.

Answer 3

La barre de menus est un horzontal <ul> avec un <li> pour chaque menu déroulant

Les bas de chute sont verticale <ul>

choses Css spécial requis:

• Pour <li> utilisation "list-style: none" pour se débarrasser des balles, etc.

• Pour <li> utilisez "display: inline;" pour la disposition horizontale au lieu de la valeur par défaut verticale

• Pour <a> à l'intérieur de <li> pour les éléments de menu cliquables réels, utilisez "remplissage: 10px 20px;" (Ou d'autres dimensions) pour faire une plus grande zone cible de la souris

Answer 4

Il pourrait aider à obtenir le tableau d'ensemble pour comprendre pourquoi le onmouse (out | plus) événements et/ou la classe de vol stationnaire ne sont appliquées au menu articles qui ont des enfants et pas les éléments de menu réguliers. C'est parce qu'ils, tout en étant visuellement loin de leur parent, restent toujours dans leur parent sémantiquement. Ainsi, lorsque votre souris quitte l'élément de menu parent dans ses enfants, le parent est toujours considéré comme ayant survolé la souris.