I’ve been trying to find some videos that give instructions on how to create a collapsible (left to right) side menu, but I didn’t find much.
To clarify, I essentially want to be able to hover over the vertical object (found on the left in the image I attached), which would then automatically expand to show the object on the right (menu options open). And when the user moves his mouse away from the sidebar, it would automatically slide back to it’s original position (item on the left side of the image)
I don’t know if this is what you are looking for, but I was able to do the following with a couple floating groups, some drag/drop groups, and conditions with transitions.
In a nutshell, I added two floating groups that run down the entire page. The first one is set to the width of the closed menu and is the color that you want it to be. The next floating group is set to the width of the full menu and the background color is the same, but with the opacity set to 0. It has a conditional and transition on it to change the background color when the drag/drop group is set to Yes.
Add a drag/drop group set to the width of the full menu. make it a Yes/No type and set the default to No. In the conditions, add a condition for when the drag/drop group is hovered, change the data source to yes. Then in the workflow tabs, add a when a condition is true workflow and add when the drag/drop group yes/no is yes, and another one for when it is no. Then add a move a drag/drop group action. Adjust where the group should be according to whether it is open or closed. Look at the editor for how I did it.
Then inside the drag/drop group, add a group and another drag/drop group. The drag/drop group will have the closed menu items in them and then move to the left as the menu expands. The group contains the full menu and appears when the menu is completely shown. The text element has transitions and the full menu group lays on top of the drag/drop group when open so the icon and text can act as a button.
Take a look at the editor and let me know if you have any questions. I hope that this provides you what you were looking for.
This is exactly what i’m looking for! I’m gonna tinker around with the instructions you’ve provided, and if anything is confusing, I’ll let you know. Thank you!
