dynamic Side Menu.
Question
Application Type
Reactive

Hello, good day to everyone.

I would like to know how I can do the dynamic Side Menu.
1. At the moment of placing the cursor near the east it is shown automatically.
2. when the cursor moves it can be hidden automatically

menulateral.png

Solution

Hey there

First what I did was, created a container that will be the container that will be the space that I am going to do the hover to open the menu.

Then on that container, I inserted the event onmouseover, what does that mean?

when I do a hover on the container it will execute an action.


That action, i have a javascript that with the id of the LayoutWrapper will add the class menu-visible to open the menu


To close the menu, I put an event when the user gets out of the menu and goes to the main

It will be the same to open the menu, but in this case, I will use the remove to remove the class .menu-visible

document.getElementById($parameters.MenuId).classList.remove('menu-visible')

The CSS that I did to the container that I am going to do hover is:

.open-menu{
    position: absolute;
    background: transparent;
    height: 100%;
    padding: 1.5%;
    top: 0;
    z-index: 1;
}


Also, I needed to put this CSS:

.layout-side .app-menu-content{
    z-index: 110;
}

Because the z-index of the main content was bigger than the one of the menu, and that was making the menu close even if I was hovering the menu...

The .open-menu is just a class that I gave to the container.

You can try here and give me some feedback:

https://marcio-carvalho4.outsystemscloud.com/MenuOpenOnHover/Products?_ts=637657033642018495

I also shared my OML

Kind Regards,

Márcio


MenuOpenOnHover.oml

Hi friend.

Can you explain better? Your idea is to trigger the menu on hover?


Kind regards

It's right. Activate menu on passing hover ! 



Hello Friend,

Can you please check this link I think it will help you.

https://www.outsystems.com/forums/discussion/37091/beautiful-menu/

and Dublin theme also have good side menu.

you can use this forge component also https://www.outsystems.com/forge/component-overview/202/dynamic-menus


Make a nice day!!

Kind Regards,

Ajit kurane

Solution

Hey there

First what I did was, created a container that will be the container that will be the space that I am going to do the hover to open the menu.

Then on that container, I inserted the event onmouseover, what does that mean?

when I do a hover on the container it will execute an action.


That action, i have a javascript that with the id of the LayoutWrapper will add the class menu-visible to open the menu


To close the menu, I put an event when the user gets out of the menu and goes to the main

It will be the same to open the menu, but in this case, I will use the remove to remove the class .menu-visible

document.getElementById($parameters.MenuId).classList.remove('menu-visible')

The CSS that I did to the container that I am going to do hover is:

.open-menu{
    position: absolute;
    background: transparent;
    height: 100%;
    padding: 1.5%;
    top: 0;
    z-index: 1;
}


Also, I needed to put this CSS:

.layout-side .app-menu-content{
    z-index: 110;
}

Because the z-index of the main content was bigger than the one of the menu, and that was making the menu close even if I was hovering the menu...

The .open-menu is just a class that I gave to the container.

You can try here and give me some feedback:

https://marcio-carvalho4.outsystemscloud.com/MenuOpenOnHover/Products?_ts=637657033642018495

I also shared my OML

Kind Regards,

Márcio


MenuOpenOnHover.oml

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