How do I enable Toggle by Hover on Dropdowns and Mega Menu Dropdowns? I do not see this feature on the latest version of Pro 6.5.10
Hi @antonsiedlecki,
Thanks for reaching out.
It is not clear what you mean by enabling toggle by Hover. I would suggest you go through the following article on how Togglable can be used in the elements.
Hope it helps.
Thanks
Hi Tristup,
If you look at the documentation I linked to prior, you are showing for a Dropdown Menu, you can choose between and Click or Hover state to trigger the Dropdown of a Toggle.
The issue is this ui option does not existing in the newer version of Pro, therefore the documentation is out of date.
Which is why I asked, in todays version of Cornerstone for Pro, how do i do this?
From the current link you provided, my understanding is there is nothing out of the box asides writing some javascript to trigger on hover and exit on mouseleave type situation.
If you can confirm that would be great
Thanks, A
Hey @antonsiedlecki,
There should be an option toggle in the Dropdown element when using the latest version of the theme.
If the option is not working, please provide access to your site so we can check. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Cheers.
@ruenel yeah that does not exist
I think i see the problem in that its not on modals, just on dropdowns, so I will need to reconfigure my modal to be a dropdown if thats possible. Might be too much work if I am honest. I may just go the js route as thats simpler at this point.
Hey @antonsiedlecki,
With Modal element, it does not have that option. It has to clicked to display the Modal.
Thanks.
I figured out my own way of doing it.
I looked at how the hover trigger was added to your modal and applied the same element attribute to the mega menu item and it seems to work.
However if you use elements like a dropdown within the mega menu, it will mouse leave to early so I built a mouse leave mechanism
On my buttons where the mega menu is triggered from, i used a onmouseover element attribute to embed it, you can also have this as javascript within your component or else where.
window.xToggleUpdate('e2441-e18', true)
Added this to the Header JS
document.querySelector('#e2441-e18-modal .x-modal-content').addEventListener('mouseleave', (event) => {
// Check if the mouse has fully left the scroll area and is not entering the inner content
if ( event.relatedTarget && event.relatedTarget.closest('.x-modal-content-scroll-area')) {
window.xToggleUpdate('e2441-e18', false); // Close the modal
}
});
I would only suggest the above code if you have dropdowns within a modal to prevent pre-flight mouse leave.
As for Normal use cases, you could get away with adding a element property of onmouseleave and then for the value
window.xToggleUpdate('e2441-e62', false);
Keep in mind for all of these, you need to look at your specific data-x-toggelable id value which you will see in your DOM explorer on the browser, thats where you would replace e2441-e62 for your actual id.
Just leaving this here for others who stumble along this issue.