Collapsing Menu HELP!

I have a major issue that stops me from proceeding. I am building a collapsing menu on the left side of the page. Then triggered by a button, it should collapse and expand the rest of the content on the page.
The menu itself is a floating group anchored to top and left. The top bar is also a floating group anchored to top and left, but is less important.
See GIF on preferred behavior:
ezgif.com-gif-maker (1)

See gif on current behavior ( just triggered by a downscaling of the page):
ezgif.com-gif-maker

Ive tried everything, switching type on the floating group, putting an empty group behind the blue menu group, using conditionals to hide the elements, using responsive designer to create hiding rules, nothing works.
WHAT DO I DO? @team there are more posts with similar problem, with not sollution…

Kindly

Emil

Have you added a hiding rule to the empty group beneath the side bar?

Yes. But the issues is that i want the users to be able to hide it manually from a full screen view, and not only when the page is a certain width. I cant get it to work using a workflow either.

Im assuming you are talking about this setting here right?

Unfortunately i am not seeing any changes. What would you suggest to set it to?

There is a plugin that does what you are asking, Its called Mobile Menu by zeroqode.

Here is the demo: https://zeroqode-demo-13.bubbleapps.io/mobile_menu

Here is the plugin page: https://bubble.io/plugin/mobile-menu-1512727428491x870149825618509800

Thanks ben, but this plugin just pushes the content to the right, so some of the content is cut away. the idea is to still have all the content on the page.

Hey there!

That’s a great problem you’re chewing on! There are almost always many ways to solve a problem.

To understand your goals, please define the following parameters!

  1. In your target gif, that page is slightly compressing, however, some of the data is pushed off the screen. Do you:
    A) want all of your data to be on screen in a horizontally compressed fashion when the side menu becomes viewable?
    B) want your data to simply be telescoped to the right, pushing some content off the screen?
    C) for some crazy reason, you’d like to see your data partially compressed with some of it being pushed off the screen to the right?

    If B is acceptable, then the issue is scads simpler than having to redesign a compressible viewport as with option A! If you want to execute option C, I have some ice up in Alaska I’d like to sell you.

  2. I’m assuming you want your side menu to push the content, rather than covering it right?

    SIMPLY move the group to the side with the push of that lovely icon.

  3. You need to do your research to look into: When a box has its size changed programmatically, do the non fixed width contents inside resize… Wait… I don’t know the answer to that… one moment please! (a few minutes later) Oh, I see…

PLUGIN: Move and Resize Bubble Elements…
practice manipulating your content to understand how this works… It’s totally doable.

MENU recommendation: Move it on and off the screen to the left (negative X positions pull contents off screen to the left.

CONTENT recommendations: Depending on your option A, B, or C, you have a little or alot more work to do…

If you have any troubles, drop me a line. I’ll point you in the right direction my friend.

Sincerely,

Ashley

Hey Ashley, thanks for spending time on me!

1: A- YES! The GIF is just a small view of the actual page, ( i shoulde have selected a bigger area with my screen recorder) so the content needs to compress horizontally. On a mobile version it would be okay for the content to be cut off.

2: I think i answered that in no 1. Pushing definitely.

  1. I played around with the draggable elements. Ill look into the plugin you described, The draggable plugin just dragged the element to x 0 and then left the corresponding gab on the right side instead :slight_smile:

Again, Thanks!
Emil

Now you’ve got the scent of it!

Once you know how to do something it’s simple right?

Many projects get stuck because of a tiny detail!

Sincerely,

Ashley
ps. let me know if you get stuck.

Well it didnt exactly get me much further, so i dont quiet have the scent yet. I know what i want, i just cant find the way there. :slight_smile:

Oh,

BREAK the problem down!
I often create a ‘test’ page to check out some concept.

eg. 1) start with the side menu.

              Can you create a box that moves on and off the website ?  

   2) Continue with stretching boxes.

             Do you clearly understand how to manipulate the width of an object/box/text?

             If  you want to stretch a group with things inside of... Then can you manage the manipulation of all things inside it?

My friend, it takes time to build programmatic logical thinking. That is a huge benefit of this beautiful sandbox. Keep at it! This is a step-by-step, methodical activity.

Let me know how it’s going!

Ashley.

Apart from wanting to recreate the behaviour, what UX specific reason do you have for this? Bubble can collapse height of a hidden element currently, but not the width. That’s something to do with the current responsive layout implementation. Not sure if flexbox initiative will make a difference here. Does anyone know?

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.