Simple Menu disable Flyouts option

SOLVE
Regular Contributor

How can I disable the Flyouts on simple menu Hubl snippets

{% simple_menu menu_tree="{{ module.mobile_simple_menu }}" %}

unlike the Menu snippets, you have the option to turn off the flyout option

{% menu flyouts='false' id="{{ module.main_menu }}" %}

does someone has any idea how to turn it off as the flyouts have a click event listener that I'm having difficulty to disable.

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
HubSpot Moderator

Hi, 

 

Currently there is not an option to disable flyouts on the simple menu. Was there a specific reason why the regular menu tag would not work here. That is part of the advanced menu so isn't as easy to work with something than the simple menu but does have the optional paramter to disable flyouts. 

 

Although I have not done this if you cannot use the Menu tag in your HubL and need to use the simple menu you might be able to try to manually remove the event handler from the attached event listeners. I believe that event handler is added as focus to the menu items. You should be able to use unbind to remove these event listeners from the menu items. http://api.jquery.com/unbind/

Reply
0 Upvotes
4 Replies
HubSpot Moderator

Hi, 

 

Currently there is not an option to disable flyouts on the simple menu. Was there a specific reason why the regular menu tag would not work here. That is part of the advanced menu so isn't as easy to work with something than the simple menu but does have the optional paramter to disable flyouts. 

 

Although I have not done this if you cannot use the Menu tag in your HubL and need to use the simple menu you might be able to try to manually remove the event handler from the attached event listeners. I believe that event handler is added as focus to the menu items. You should be able to use unbind to remove these event listeners from the menu items. http://api.jquery.com/unbind/

Reply
0 Upvotes
Regular Contributor

@jzilch,
thanks for the reply, actually I'm giving my client an option to either use Advance menu or Simple menu, and make them both work on mobile as a simple hamburger menu.
this menu is created as a custom module and not as a global group.
and the idea is we have a flexible column, where an end user can add this custom module and every time that custom module is added it will override the original header global module. 
It works perfectly fine if I'm creating a template with only this custom module and not having the original group header, here's the preview https://www.simplr.ai/-temporary-slug-ee6f11c0-c287-42bf-b6f0-947b607d8858?hs_preview=YOuDUEmg-67239...
but If the Original global group exist and try to override it with the custom module, the hamburger menu navigation looks like it's been triggered twice on the first click, making it opening and closing and here's the link for that (http://www-simplr-ai.sandbox.hs-sites.com/-temporary-slug-438a8eb3-04e1-4ba4-8ef0-f36d8b7157d2?hs_pr...) go to mobile view> open the hamburger menu > click on customer stories.  

these things only happen if the flyout is enabled, I'm suspecting the Projecs.js that comes from the flyout.
flyouts.PNG

 

but already tried to unbind the focus and blur events, but still having an issue.


Reply
0 Upvotes
Advisor | Platinum Partner

@valerajoey, could you write a script that says basically

if ($('.nf-custom-header-group').html().length > 0){
 $('.custom-menu-primary').remove()
}

can you just remove the original nav?

 

side note:  for your custom nav, do they change per page? 

if you need them to be the same for many pages, try using hubdb for the menu items.

maybe you are already doing this, but thought i would mention Smiley Happy

dennis
Reply
0 Upvotes
Regular Contributor

 @dennis_e

I think you've got it the opposite way,  so basically what our client wants,  is to have a custom navigation that will override their default navigation on the template, by just dropping that custom module

 

re:  for your custom nav, do they change per page?
I don't know but they have the power to do it with the custom module and they also have the option to not use the navigation (ideally for landing pages).


as I've checked it on the actual devices the issue (double-click trigger) is not happening, it was just working fine, I've only had this issue on desktop browser mobile view.weird but, yea, I guess I'll mark it as solved. Thanks for your help guys.

Reply
0 Upvotes