Menu de liste à plusieurs niveaux de type accordéon

Question

J'ai regardé autour de moi et je n'ai pas encore trouvé de solution à ce problème. J'ai un menu de la liste avec des balises comme si

<div id="menu"> 
    <ul> 
    <li>Category #1 
     <ul> 
     <li>Item #1</li> 
     <li>Item #2</li> 
     <li>Item #3</li> 
     </ul> 
    </li> 
    <li>Category #2 
     <ul> 
     <li>Item #1</li> 
     <li>Item #2</li> 
     <li>Item #3</li> 
     </ul> 
    </li> 
    <li>Category #3 
     <ul> 

     <li>Item #1</li> 
     <li>Item #2</li> 
     <li>Item #3</li> 
     </ul> 
    </li> 
    <li>Category #4 
     <ul> 
     <li>Item #1</li> 
     <li>Item #2</li> 
     <li>Item #3</li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Ce que je suis en train de faire est de faire en sorte que le menu est entièrement horizontale, lorsque vous passez la souris sur une catégorie, il glissera les articles à côté. exemple visuel ici

Son tout à fait important qu'il est construit sur une liste structurée et comme je l'ai dit pour autant que je sache, aucun des accordéons, j'ai vérifié si bien appuyer cette fonction. Une idée est?

Answer 1

Y at-il des liens dans les articles Lite? Si oui, vous pouvez essayer quelque chose comme ceci:

li ul { 
    display:none; 
} 
li, ul, a { 
    float:left; 
    margin:0; 
    padding:0; 
    outline:1px solid; 
} 
li:hover ul { 
    display:block; 
} 

Cela ne comprend pas la fonctionnalité « glisser », mais montre que vous aurez probablement besoin d'un élément séparé autour du texte juste avant chaque ul imbriqué. (Le style général est ici bien sûr que la preuve de concept, ne hésitez pas à sauter le par exemple les grandes lignes;)

Answer 2

est une implémentation THere horizontale ici accordian

http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html 

il dépend horizontal ou vertical comment vous flottez les éléments.

Je trouve l'exemple de l'emplacement ci-dessous

http://www.catswhocode.com/blog/8-amazing-jquery-accordions 

Answer 3

Quelque chose le long des lignes de

.menu ul {margin: 0; padding: 0; liste de style : none;} .menu li {float: left; top: 0;} .menu li ul {affichage: aucun; en haut: 0;} .menu li: hover ul {affichage: inline; top: 0;}

va faire l'affaire pour créer ce que vous voulez, mais le problème n'est pas dans la création, mais dans l'utilisation. Ce sera à des fins pratiques - nerveux de passer de l'enfant à un autre parent sur la droite, et des liens inutilisables/non sélectionnables si vous faites un multi-niveau au-delà du code que vous avez collé. L'élément survolé se déplacera hors de la position (et donc hors plan) et perdra son style et se focalisera dans certains cas, par exemple, en passant de #Item 3 à #Category 2 dans votre exemple, l'élément 3 perdra son focus, et ainsi la catégorie 1 perd le focus et donC#Les articles 1,2 et 3 deviendront invisibles et la catégorie 2 viendra à la place de l'article 1.

Cela peut encore fonctionner, si vous avez un seul niveau de sous-liens. Pour plus d'un niveau, la nature du menu est telle que de nombreux liens seront inaccessibles, car ils changeront de position/cacher avant de pouvoir être cliqués.

Pour faire encore fonctionner d'une certaine manière, vous pouvez utiliser CSS3 et/ou javascript pour créer une animation lente de l'apparition et la disparition des liens et peut-être quelqu'un avec des réflexes rapides peut choisir une .....

pas un tel une bonne idée.

Peut-être préférable de créer un menu de type accordéon et d'utiliser les clics pour basculer entre l'expansion et la réduction plutôt que le survol. PS: Je n'ai pas testé le code que je vous ai donné. Vous devrez peut-être tester et modifier.PPS: Le "top: 0" pour le "display: none" de toute façon est parce que si vous finissez par utiliser des transitions, vous ne voulez pas qu'il saute hors de son emplacement. Optionnel. PPP: Je ne dis pas ne le fais pas, je vous dis seulement à quoi m'attendre. Bien sûr, vous pouvez toujours utiliser cette chose effondrement désorientant à votre avantage en le faisant ressembler à une chose expressive/attitude. .... des images lourdes pour les arrière-plans de catégorie, et un ressort hélicoïdal pour les arrière-plans de l'article ....? Vous obtenez le train de la pensée?