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