Member Avatar for tomparker

This may be a little 'outside the box' as far as mega menu's go, but I'm trying to do a 'flyout' or submenu off of a mega. Take a look at and hover over 'Channels'. When 'Sunday Services' is hovered over, I want a menu to appear to the right, like the next level in a dropdown. I actually have that working, but the problem is, when Channels is hovered over, it's displaying the submenu, when I only want that to be displayed when 'Sunday Services' is hovered over.

I can post the code that i have done to try to make this work, but before doing that, I thought it might be best to throw this out there and get feedback on how to make this happen.

btw, I have suggested to the client some alternatives that would totally replace this , but it would be good to get it working in the interim if possible.

Thanks,
Tom

  • 2 Contributors
  • 6 Replies
  • 298 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by tomparker

Dani AI

Generated

Quick summary and a small roadmap you can drop in above the replies.

The symptom you hit is a scoping/event problem: the flyout (.sub2) is a child of the mega submenu, so any hover or hoverIntent bound too high in the tree (or any CSS selector that uses the ancestor being hovered) will show the flyout as soon as you enter the Channels area. @LastMitch was right to look at structure, and ’s scoped-CSS fix in reply #7 is a perfectly valid quick solution. For something more maintainable, scope the interaction to the exact list item that should open the flyout.

Practical, maintainable approach

  • Add an explicit marker class to the li that should open the flyout (for example, has-flyout on the "Sunday Services" li).
  • Attach your show/hide behavior only to that marker using delegated handlers or hoverIntent. That avoids affecting the whole .sub area and prevents accidental opens when Channels is hovered.

Example (use this in your script):

$('ul#topnav').on('mouseenter', 'li.has-flyout', function(){
  $(this).children('.sub2').stop(true,true).fadeIn(150);
}).on('mouseleave', 'li.has-flyout', function(){
  $(this).children('.sub2').stop(true,true).fadeOut(150);
});

Styling and accessibility notes

  • Keep the flyout hidden by default and absolutely position it relative to the parent li so it doesn't push layout.
  • Watch for parent containers with overflow:hidden that can clip the flyout; use z-index and position adjustments if needed.
  • For keyboard users, mirror the hover behavior with focus/blur (or focusin/focusout) and use ARIA attributes (aria-haspopup, aria-expanded) so the flyout is usable without a mouse.

Troubleshooting checklist

  • Inspect event listeners in DevTools to confirm nothing is bound to the top-level .sub.
  • Temporarily remove hoverIntent on parent nodes to see whether that resolves it (that will confirm the root cause).
  • Test keyboard navigation and on small screens switch to click-to-toggle for reliability.

Recommended Answers

All 6 Replies

Member Avatar for Member #949455

tomparker

I can post the code that i have done to try to make this work, but before doing that, I thought it might be best to throw this out there and get feedback on how to make this happen.

I went on the website you provided and try to see what you are talking about but I really don't understand what you are talking about.

Can you post a image of what you are talking.

Member Avatar for tomparker

Thanks @LastMitch for checking it out. I've created a subdirectory on my server as a 'work area' with a trimmed down version of the page and files involved. Here you can see how the worship and teaching dropdown is displayed as soon as you hover over channels. I don't want that displayed until 'sunday services is hovered over. As it is now, once you hover over 'Sunday Services' and then hover out, it works as it should, as long as the pointer stays inside the menu.

I have the css code for the 'dropdown', on the index page itself. The css for the megamenu is in a minified file on the morningstar website, but I have a copy of the 'non-minified' code that pertains to the menu in

Member Avatar for Member #949455

Take out the <ul> </ul> tags:

<div class="sub2" id="sub2Div">
<li><a href="#">Worship</a></li>
<li><a href="#">Teaching</a></li>
</div>
Edited by Member #949455 because: grammer
Member Avatar for tomparker

@LastMitch

I tried what you suggested, also modifying the css reflecting that the ul was no longer there, but it didn't work. I'm pretty sure I need the ul to remain, because worship, and teaching are a 'sub list' of Sunday Services. I'm thinking the issue is more along the lines of the hoverIntent script is displaying the sub2 div when 'Channels" is hovered over, becuause it's a child of the sub div. I need to prevent that from happening.

Any ideas?

Member Avatar for Member #949455

I'm pretty sure I need the ul to remain, because worship, and teaching are a 'sub list' of Sunday Services. I'm thinking the issue is more along the lines of the hoverIntent script is displaying the sub2 div when 'Channels" is hovered over, becuause it's a child of the sub div. I need to prevent that from happening.

I can't find CSS sub2 from this list:

So that's why I ask you take it out.

If you have a CSS sub2 then post it.

Member Avatar for tomparker

@lastMitch

I thought I posted a response to this yesterday but apparently it didn't save, maybe I was timed out...anyway, I resolved the problem by adding the following css:

ul#topnav li:hover > .sub2  {
    opacity: 1;
    display: block;
}

I also took out the lines that I had added to the navmenu.js, pertaining to .sub2., which was applying hoverIntent.

btw, sorry if I wasn't clear enough on the location of the css for sub2, it's on the index page in the header. The topnav.css file is the css 'cut' from the minified css file, just for reference, it's not being loaded.

Thanks for your time looking into it!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.