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.
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.
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.
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?
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.
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.