Dick Leung
Rank: #63748
12Views
5Comments
Solved
Add menu icon on pull out panel
Question
Beginner
Front-end
OutSystems UI
Traditional Web
UX
Application Type
Traditional Web

Dear all,

I am newbie here, my question is about the menu icon, when the screen resolution is narrow down, you can see the point 1 menu icon. When I click on this,  its will be pull out a small panel. I want to add a menu icon as per point 1.

So, how can I add this menu icon in point 2 location. I use outsystem UI  theme.

Wish you can help

Thank you very much

Dick Leung


screencapture.jpg

0
0
on 2020-12-24
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #75
Solution

Replying to Dick Leung's comment on 24 Dec 2020 08:26:14

You're welcome, Dick Leung

Glad to help you :)

If the shared solution helped you, then please mark it as a solution. 


Kind regards,

Benjith Sam

See solution in context
0
0
on 2020-12-24
Copy link to comment
Dick Leung
Rank: #63748
Solution

Thanks for your help, that is exactly what's I want. Thank you very much for rapidly solutions.

See solution in context
0
0
on 2020-12-24
Copy link to comment
Shweta Gedam
Rank: #292

Hi Dick,

Do you want to add same menu icon on point2 location after the menu expansion? Also could you please confirm the purpose of this menu icon?

It would be great if you can also share the oml for the same.

Thanks

1
0
on 2020-12-24
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #75

Hi Dick Leung,

I have tried the mentioned scenario and got a near success with it. see this sample app

Implementation Points

  • I have used OutSystemsUI Module - Responsive\DisplayOnDevice widget to conditionally display the hamburger menu icon i.e. in case of Tablet and Phone view(resolution)

  • Defined/Overridden some CSS rules in the menu block styleSheet section
  • Defined the action logic flow to hide the menu panel on the click of hamburger menu icon using JavaScript


Hope this helps you!


Kind regards,

Benjith Sam

TWALabPhMenu.oml

1
0
on 2020-12-24
Copy link to comment