mega-menu en utilisant jQuery

J'essaye de créer un "mega menu" en utilisant <ul> imbriqué dans un <li>. En utilisant jQuery (mouseover) sur le parent <li>, je peux faire apparaître <ul class="sec1" et <ul class="sec2">.mega-menu en utilisant jQuery

Mais le passage au clavier sur li ne fonctionne pas car la liste déroulante disparaît dès le déploiement du parent <li>. Comment puis-je garder la liste déroulante active si la souris est sur le parent <li> ou l'un des enfants <ul>?

Structure HTML ci-dessous.

<li>link 
<ul class="sec1"> 
    <li>sub-link1</li> 
    ...... 
    <li>sub-link5</li> 
</ul> 
<ul class="sec2"> 
    <li>sub-link1</li> 
    ...... 
    <li>sub-link5</li> 
</ul> 
</li>

grâce

Source

2010-09-27 pixeltocode

Où rencontrez-vous des problèmes? Quel navigateur? Je ne peux pas reproduire cela en utilisant http://jsfiddle.net/vMPRa/ (le menu reste ouvert sur tout sous-menu) – Robert

merci. votre jQuery semble fonctionner. J'utilisais des fonctions séparées pour montrer et cacher. puis-je accepter un commentaire comme réponse? – pixeltocode

@Robert - Souhaitez-vous publier votre JQeury en réponse? – pixeltocode

Si vous essayez de construire un menu de style suckerfish, vous devriez essayer le hoverIntent plugin ou mieux encore, utilisez la Superfish plugin qui a le soutien pour elle.

Cordialement.

Source

2010-09-27 07:44:29 xmarcos

+1 pour superfish –

Pour empêcher la fermeture du méga-menu lorsque vous passez les éléments descendants à l'intérieur du parent li, vous devez utiliser l'événement mousemove. Voici le exmample que j'ai créé pour vous: https://jsfiddle.net/imalitavakoli/bpmyu1sb/2/

Et vous pouvez également envisager d'utiliser ce plugin jQuery et cadre CSS: https://myflashlabs.github.io/24component-bars/

Voici également son exemple méga menu: https://myflashlabs.github.io/24component-bars/previews/nav-03.html

Il vous aide à créer un menu, un en-tête, une barre latérale et un pied de page très réactifs avec de nombreuses fonctionnalités rapides et simples, sans tracas ... C'est exactement ce que vous voulez :)

Vous n EED pour le coder vous-même dès le début quand il y a déjà une solution là-bas!

Source

2017-05-20 23:19:58 Ali

mega-menu en utilisant jQuery

Répondre

Questions connexes