Building a slide in/slide out menu

Hi,

I tried to look around this site for an answer to my question but couldn’t find it. I am designing an application where the user will tab through the contents of the screen and when they are ready they will press a button and a side menu will slide in which will allow them to make a decsion on the information they have just looked at.

I have got part of the way but I’m totally stuck now. Ideally when the menu slides in it will resize the contents of the panel and vice versa when it slides back in again. It also should stick to the panel. Pushes when it slides in and pulls when it slides out.

Any help would be greatly appreciated.

Kind regards,
Pete

side bar.rp (66.2 KB)

I’m wondering if I’ve actually been as clear as I could be with this problem so I’ve added another version of the file with some text on it that should hopefully be more helpful. If you are kind enough to help me please do not hesitate to ask me for further info.

Kind regards,
Peteside bar.rp (68.1 KB)

Sure! There’s a few different ways you can achieve what you want.

The easiest way is to use the “Push/Pull widgets” option under the “Set Panel State” interaction. If you don’t use any animations, it will work great. However, because your panel states aren’t the same size, animated transitions won’t work well.

You can resize the the sidebar and move the contents when it resizes.

You can move the whole sidebar off the page and set the sidebar to move the contents with it. If you use this method you have to make the “small menu” state the same size as the big one and move the buttons to the far right of the panel or the whole thing will just disappear.

side bar.rp (143.4 KB)

Hi,

Thank you so much for your help! That is absolutely what I’m looking for.

Cheers,
Pete

Hi,

I was wondering if you could help change the function of the buttons so that instead of two there was just one that had both open and close functionality?

Kind regards,
Pete

You can set the button’s onClick event to “set selected/checked”, “This”, “toggle”

Then just add the slide in/out logic to the button’s “Selected” and “Unselected” events.

If you want to get “fancy” you can set the button’s text to change as well, just make sure that both values fit inside the button because it won’t automatically resize.

Hi,

I’ve asked and deleted a couple of questions about the sidebar as I’ve worked them out over the last few hours.

Could you help a bit more with turning the two buttons into one? I’m sure this is quite simple but for some reason I can’t figure this one out.

Team view (draft) (2) (1).rp (62.8 KB)

Yep.
Team view (draft).rp (71.5 KB)

You can do it a few different ways, I showed changing the text on the button and using a dynamic panel. Which one you use depends on what your overall design is.

Probably the easiest thing to do (and the one I forgot to show) is to just put the button inside the sliding panel (if you can). That way the button would “move” with the panel. It would work the same as using the dynamic panel method I demonstrated.

Thank you so much! Can I just check the forum etiquette - I have a few more questions about my page which is related to the sidebar. Should I reply in this post or start a whole new thread?

I’m also trying not to overwhelm you with questions.

If they’re pretty specific to your project, just message me directly.

Great. Thanks so much for all your help so far.