Submenu open on Hover using Navigation\Submenu from Outsystems
Question
Application Type
Reactive

Hey, any idea what should I modify in css if I want to open the submenu on hover?


This is the widget tree and I dont know what to modify in CSS. Is there any way? or I need to use other component to use hover feature? Thankyou very much

mvp_badge
MVP
Solution

Hi Json,

I think you are using an old version OutSystemsUI. 

I'm using OutSystemsUI Version 2.9.0

Can you try using the below JS code.

var subMenu = document.getElementById($parameters.SubMenuId);

subMenu.addEventListener('mouseover', function (e) {
    e.target.closest('.submenu').classList.add('open');
});

subMenu.addEventListener('mouseout', function (e) {
    e.target.closest('.submenu').classList.remove('open');
});


I hope this helps you!


Kind regards,

Benjith Sam

Hi Jason30, I believe this solution will solve your problem.

https://www.outsystems.com/forums/discussion/65784/show-the-dropdown-menu-on-hover/


Kind regards,

Ary Mesquita.




Hi Ary, unfortunately that link you sent is using Traditional Web and different widget (and class), Sorry, Correct me if i'm wrong too thankyou for your answer

mvp_badge
MVP

Hi Json,

I observed that somehow the SubmenuOpenOnHover action suitable for your usecase is not working as expected.


One of the solution for your usecase is to use the below-mentioned custom JS in the OnReady action flow.

JS Snippet:

var subMenu = document.getElementById($parameters.SubMenuId);

subMenu.addEventListener('mouseover', function (e) {
    this.classList.add('osui-submenu--is-open');
});

subMenu.addEventListener('mouseout', function (e) {
    this.classList.remove('osui-submenu--is-open');
});

Demo screen: SubmenuHoverTask

Refer to the attached oml

I hope this helps you!


Kind regards,

Benjith Sam

NeoLab_SubmenuHoverTask.oml

Hello, thanks for your answer, apparently it's working but not working if I place it in the menu webblock, how if I want to place it in the webblock? so it can get in every screen

mvp_badge
MVP

Hi Jason,

I have checked that the custom JS approach which I mentioned in the last post is working in case you define in the reusable menu block as well as defined in the screen.

For me, the SubmenuOpenOnHover action is not working in any of the case.

Demo screen: SubmenuHoverTask

Refer to the attached oml

I hope this helps you!


Kind regards,

Benjith Sam

NeoLab_SubmenuHoverTask.oml

Sorry, I tried to inspect and the class is changed, but why my dropdown not open?. After I check my css class not using the osui--submenu-isopen but the div below that submenu is--dropdown open, but I couldn't change that class because I dont know how to change that because it's in item menu inside submenu Id. how to do that? *the picture uploaded below is twhat i have to change
I'm sorry but I cannot find to solve this problem thankyou

mvp_badge
MVP
Solution

Hi Json,

I think you are using an old version OutSystemsUI. 

I'm using OutSystemsUI Version 2.9.0

Can you try using the below JS code.

var subMenu = document.getElementById($parameters.SubMenuId);

subMenu.addEventListener('mouseover', function (e) {
    e.target.closest('.submenu').classList.add('open');
});

subMenu.addEventListener('mouseout', function (e) {
    e.target.closest('.submenu').classList.remove('open');
});


I hope this helps you!


Kind regards,

Benjith Sam

@Jason30
 
You can set a class and using that you can apply JavaScript as well.

Thanks

Sorry can you elaborate this more? I dont get it sorry i'm a bit new to programming stuff

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.