260
Views
2
Comments
How do I implement side navigation drawer?


What I want is,

When  you open in browser, the side menu is like this. Only icons shows on the left side.


Then when you hover on the side menu, it expands like below.


The above is what I'm expecting.


I suppose we can often see this sort of navigation menu screen, but is it possible to implemet this with Outsystems?

I tried several things but I couldn't solve it.

I'd like to know about how to do it. I'd appreciate it if you could tell me about it with your sample app or something.


I look forward to your advice.

Best,


2021-06-02 20-50-04
Márcio Carvalho

It is possible, you just need to create or adapt a block to make it look like that.

There is already a similar question asking for that:

https://www.outsystems.com/forums/discussion/76966/custom-side-menu/

What I would do is, clone a layout, work and see how the layout with the side navigation works, check the above link to see how the layout is working and try to replicate the inside of my clone layout the solution.

You can (if you want) just use CSS.

What will make the menu works as you want is by seeing where will be your hover, the menu width attributes for the menu when it's open and when it's close, etc.

Regards,

Márcio

UserImage.jpg
Tsubasa Yoshikawa

Hi Márcio ,

Thanks. I understood it's possible, also I checked the link but you mean,do I need to set css to this SideMenu block?

I know we can do it with CSS but I currently am not sure how to set css to the SideMenu.


I end keeping it open...Sorry but could you possibly tell me about this part?

I wonder how I should set css here...


Regards, 

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