Functionality of menu expanding with other elements

Questions
1

Hello to all and to anyone who can help. What is the functionality behind when a menu opens up, it also pushes other elements with it and vice versa?

I created the menu from scratch.

57%20PM
57%20PM743×578 31.3 KB

38%20PM
38%20PM765×555 32.2 KB

2

Hi @gaffneyantonio,

This isn’t exactly where my deepest Bubble knowledge lies, but since nobody else jumped in I thought I might push it forward a bit.

Some javascript can get control those two elements:

To open the menu, and move calendar right, set some element IDs and then run js:

var newMenuWidth = 250; //Change this to your desired width
var oldMenuWidth = parseInt(document.getElementById("menu").style.width);
var newCalLeft = newMenuWidth - oldMenuWidth;
document.getElementById("menu").style.width = newMenuWidth.toString() + "px";
document.getElementById("cal").style.left = newCalLeft.toString() + "px";

36%20PM
36%20PM998×1056 96.9 KB

To close and reset:

var newMenuWidth = 80; // Your original menu element width
var newCalLeft = 0;
document.getElementById("menu").style.width = newMenuWidth.toString() + "px";
document.getElementById("cal").style.left = newCalLeft.toString() + "px";

43%20PM
43%20PM992×950 79.1 KB

I’m just using a custom state to control to toggle which js is run.

Looks like this:
menu

Hope this gets you closer…

–Ken


Looking to accelerate your app development?

Let me turn
:thinking: :tired_face: :confounded:

into
:grinning: :sunglasses: :woman_student:

Development through Coaching at https://uniqueideas.com or schedule a free intro session :gift:

Ken Truesdale
LinkedIn

5 Likes
3

Can you share the URL link? This looks amazing.

4

Thank you @mebeingken. This is Amazing!

5

I actually build these samples in an app that now has dozens of app id’s, secrets, etc., so I just post screenshots so I don’t have to think too much. :slight_smile: If something doesn’t make sense or is missing from the post, feel free to ask for clarification.

6

Hey @mebeingken ,

I know you show me this functionality months ago, but I gave up on it. Now suddenly, I have a newfound interest in this functionality. I’m hoping for just a few more instructions.

I got it to work by using your JS, However, it only worked once. I know that you stated that you are using custom states to run each JS. Can you expand on that a little more? Which element has the custom states? how do I make sure that it will execute consistently? I would greatly appreciate the help.

thanks,

7

For what I see in the screenshots the custom state is set on the group/element that is called ‘calendar’. When you select that group, then in the options panel click on the (i) information icon on the right side in the title bar. Then you can add this custom state which is of type: yes/no or Boolean.

Good luck!

8

Yea, I got that. But I confused as to when I execute the WF, it only occurs once. So I figured I had something funky with the CS.