Forum Academy Marketplace Showcase Pricing Features

Responsive Sidebar Menu "pushing" behavior

Hi, I haven’t been able to find any document that can help me make a collapsable sidebar menu that “pushes” the main content to the right when it appears instead of just covering it.

The behaviour I want to achieve is something like this:

So if you see, it’s not a regular Slidebar. Any ideas ?

Thanks.

Marcelo.

I have a personal plugin that does this. Wanna check it out sometime? I can add you as an approved app and share the details

Hey Jared, that would be awesome !

Thanks a lot,

Marcelo.

Just sent a dm

Put a group on the page that is the same width as the side menu and label it ‘side buffer’…the side menu should be a floating group so as to ‘cover’ the ‘side buffer’…If you page is 1200px for example, and the side buffer and side menu are 280px then you have another 920px of space…what you do is to have a group that you label ‘container’ to have all your content.

Make sure responsive settings have the ‘container’ set to collapse width and set it to something high like 4200px.

Then when the side menu is supposed to be hidden, you should also hide the ‘side buffer’…this should do the trick…

Another way is to have a group called ‘container’ that you put a left margin set to 280px using conditionals when the side menu is visible, and make the left margin 0 px when the side menu is not visible.

Either method works, but I forget if there is a bit of difference between how they function…If I remember correct the latter will ‘push’ the content off screen while the former will just readjust the content to fit if your responsive settings are done properly.

2 Likes

I like this approach! :+1: :mechanical_arm:

1 Like

SOLVED

Thanks a lot for your tips, I was able to do it creating a CONTAINER group of 1280px width and putting inside of it 2 sub GROUPS (SIDEBAR 320px width and CONTENT 1280px width). Then I manually gave a solid left border = 0 to the CONTENT GROUP with the conditional of border = 320 when SIDEBAR is visible. Finally I created a workflow over a button so when it is clicked it should toggle the SIDEBAR.

This are the settings of each element so you can test it by yourself.

1 Like