CMS Development

valerajoey
Participant | Platinum Partner
Participant | Platinum Partner

Simple Menu disable Flyouts option

SOLVE

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.

0 Upvotes
1 Accepted solution
jzilch
Solution
HubSpot Employee
HubSpot Employee

Simple Menu disable Flyouts option

SOLVE

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/

View solution in original post

0 Upvotes
6 Replies 6
jzilch
Solution
HubSpot Employee
HubSpot Employee

Simple Menu disable Flyouts option

SOLVE

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/

0 Upvotes
valerajoey
Participant | Platinum Partner
Participant | Platinum Partner

Simple Menu disable Flyouts option

SOLVE

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


0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Simple Menu disable Flyouts option

SOLVE

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

0 Upvotes
valerajoey
Participant | Platinum Partner
Participant | Platinum Partner

Simple Menu disable Flyouts option

SOLVE

 @dennisedson

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.

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Simple Menu disable Flyouts option

SOLVE

@valerajoey, the thoughts with that script were if the custom module exists on the page, it would remove the default navigation

 

for hubdb - i guess you could make it change per page, but i was thinking that if many pages used this custom module and the nav that they added was the same, you could pull the nav items in from hubdb. and you could edit them in hubdb without having to edit each individual page.  if it is a large site, would be easier to maintain

0 Upvotes
valerajoey
Participant | Platinum Partner
Participant | Platinum Partner

Simple Menu disable Flyouts option

SOLVE

yup, that's exactly what they want, but having the Hubdb wasn't necessary. I do like the idea tho. but what they want is for them to be able to edit the menu on page/content editor only. and maybe what they're planning is to have a dynamic menu on each page or not having the navigation at all. 

Thanks, Bro I do appreciate your effort here,  hope I can return the favor next time.