97
Views
6
Comments
I want to create a responsive hamburger which shows side menu
Question

I have created a SideMenu and a hamburger i wanna link it and on click of hamburger it should display SideMenu 

TestingMenu.oml
2022-05-05 14-37-30
Mika Grootenboer

Hello Nidhi,

I have found two links that might help you with a side menu using the Outsystems UI components.

First one is the documentation of the side menu layout that Outsystems provides:

https://success.outsystems.com/documentation/11/developing_an_application/design_ui/patterns/using_traditional_web_patterns/layout/layout_side_menu/

Second one is a form post about a side menu with some usefull comments:

https://www.outsystems.com/forums/discussion/86621/side-menu-sidebar/

If you want to continue with your own side menu you might want create a localvariable called something like "ShowSideMenu", which is a boolean and assign it to the visible attritube of the container around your own sidemenu. And with the "LinkOnClick" action you have already created switch it from true to false.

Hope this helps

UserImage.jpg
Kiran Shetty

Hi @Nidhi Mamadapur 

I have created the oml for you hope this solves your problem for this you need layout block and

 sidebar client actions .

Regards,

Kiran

SideBarToggle1.oml
UserImage.jpg
Aira M

Hey Kiran, 

Thank you for the help , if you could provide me the steps on how to do it and also i want it below the hamburger icon it is coming on the right side of the screen , it would be great help 

Thank you

UserImage.jpg
Kiran Shetty

Hello @Nidhi Mamadapur  

I have attached the oml and here we require some css check the css i have used in it

Steps:Used the sidebar client actions to close and open the sidebar in SidebarOnToggle client action.

:Onclick of hamburger icon i have done toggle sidebar actions.

:I have used the css for the proper UI. hope this is what you are looking for

Regards,

Kiran

SideBarToggle.oml
UserImage.jpg
Aira M

Thank you so much kiran you been a great help

UserImage.jpg
Aira M

Hey kiran ,

I had 2 doubts mainly with responsiveness i tried this way but it doesn't work for smaller screens for some reason and is there any way i could keep the user info icon in the header and also on click of user icon there should be yet another side menu on the right side basically a right side menu for user icon, is there any way to do so?


Thank you 


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