CODEWITHSUNDEEP
jquery
pixeltocode
pixeltocode

Reputation: 5308

mega-menu using jQuery

I'm trying to create a "mega menu" using nested <ul> within a <li>. Using jQuery (mouseover) on the parent <li>, I can make <ul class="sec1" and <ul class="sec2"> appear.

But the mouseout on li doesn't work because the drop down disappears as soon as you rollout of the parent <li>. How can I keep the drop down active if the mouse is over the parent <li> or either child <ul>?

HTML structure below.

<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>

thanks

Upvotes: 3

Views: 938

Answers (2)

Ali
Ali

Reputation: 1462

To prevent the mega menu from closing when you hover the descendant elements inside the parent li you should use the mousemove event. Here is the exmample that I created for you: https://jsfiddle.net/imalitavakoli/bpmyu1sb/2/

And you may also consider using this jQuery plugin and CSS framework: https://myflashlabs.github.io/24component-bars/

Here is also its mega menu example: https://myflashlabs.github.io/24component-bars/previews/nav-03.html

It helps you create responsive mega menu, header, sidebar, and footer with lots functionalities fast and easy, without any hassle... It's exactly what you want :)

You don't need to code it yourself all from the beginning when there's already a solution out there!

Upvotes: 1

xmarcos
xmarcos

Reputation: 3368

If you are trying to build a suckerfish-style menu, you should try the hoverIntent plugin or better yet, use the Superfish plugin that has support for it.

Regards.

Upvotes: 2

Related Questions