Flyout menu onclick

[#1]

Hi everyone!

We use a flyout-menu on our page www.ristl.it (menu item is called "managed services") - but we'd prefer it to be triggered by clicking the menu item. Right now, the flyout is called on hovering the menu item. Unfortunately, support said there's no easy setting we can use for that - so we decided to ask for your help

Has anyone of you had success with this - or any idea how to get this working? I'm able to modify codeblocks and have a little bit of knowledge in regards to html/css, but I'd describe myself as a scriptkiddie at the very best when it comes to javascript, jQuery et al.

Thank you for your help and best regards,

david

[#2]

Unfortunately there's no easy setting and you'll need to do this with JavaScript. 

Currently the CSS on your site is set so that when you hover on the element (.hs-item-has-children), the dropdown (.hs-menu-children-wrapper) appears: 

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper {
    opacity: 1;
    visibility: visible;
}

What I would probably do is change it so that it appears when something like an "active" class is added to it instead:

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children.active > ul.hs-menu-children-wrapper {
    opacity: 1;
    visibility: visible;
}

And then use JavaScript to detect the click and add the active class when clicked. Something like this: 

var hasDropdownLinks = document.querySelectorAll('.hs-item-has-children a');
for (var i = 0; i < hasDropdownLinks.length; i++) {
  var hasDropdownLink = hasDropdownLinks[i];
  hasDropdownLink.addEventListener('click', toggleActiveClass, false);
  function toggleActiveClass() {
    this.parentElement.classList.toggle('active');
  } 
}

(Ideally for accessibility you'll also want it to update the aria-expanded parameter on the link to  true when it's clicked which it doesn't seem to be doing at the moment.)

---

Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[#3]

Hi Stephanie! Thank you so much for your fast response.

I tried to follow your advice and played around, but a few things didn't work quite yet for us.

This is for our testing purposes: https://www-ristl-it.sandbox.hs-sites.com/test_neuer-text?hs_preview=ymLGwNUF-12448194023

1) My first question is about the flyout-part:

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper {
    opacity: 1;
    visibility: visible;
}

I wasn't able to find these lines of code in our *.css (there is no mentioning of "flyouts" whatsoever) - I think these lines get automatically included by Hubspot beforehand, for all of their pre-defined menu options - could this be true? If so, do you know whether/where I have access to that?

2) I then tried to simply "override" the .flyout-settings by adding your code blocks to the footer of our page within the <style> tags (I adapted your first source code block a bit to be invisible on hover, and used your other block of code unchanged):

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper {
    opacity: 0;
    visibility: invisible;
} /* setting hover to invisible? */
  
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children.active > ul.hs-menu-children-wrapper {
    opacity: 1;
    visibility: visible;
}  

On top of that, when visiting the site, I execute the given javascript in the console:

var hasDropdownLinks = document.querySelectorAll('.hs-item-has-children a');
for (var i = 0; i < hasDropdownLinks.length; i++) {
  var hasDropdownLink = hasDropdownLinks[i];
  hasDropdownLink.addEventListener('click', toggleActiveClass, false);
  function toggleActiveClass() {
    this.parentElement.classList.toggle('active');
  } 
}

I'll try to let that be exectuted automatically in future by including it into the footer (it hasn't worked right now so I just enter it manually right now).

But then again, if I click "managed services" now, the menu flys out (and vice versa, in) with every click. That's dope!! Unfortunately, if I click it (and the flyout menu expands) and I move the cursor somewhere different on the page and click anywhere else, I'd expect the menu to become invisible again (without having to click it).

Kind of like a click on "portfolio" on https://www.acp.at/ - it opens the flyout menu and if I click somewhere else on the page, the submenu disappears again.

Thank you very much for your help!

Best regards

david

[#4]

When you're clicking on an element you're also hovering over it, so setting it to be invisible on hover will conflict with the "active" class added by your JavaScript which is why your sandbox example is working stragely.

That piece of code I mentioned should be in your ristl_IT_August2019_ReDesign-style.css file at lines 227 - 230:

It's possible it's been added in at the top using an {% include %} statement, possible in the "recommended.css" file which I haven't used for a while. I'm not sure how often/if they update that but you could always remove the include and just paste in that code manually to update those lines. You can click on "Show output" to see it: 

You could use another function that checks for clicks on the page and, when they're not inside a menu item or dropdown, removes the active class for all dropdowns. 

---

Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact