Slideable Menu Question

I just noticed something. Did you make your own sidebar instead of using the one that comes with bubble?

I put that in a JS action in the workflow system using the plugin I mentioned before(JS Toolbox)

Yes, I created my own sidebar using a floating group relative to top and bottom.

Does this mean your page is “main” and your menu is called “sidebar”?

I think this is exactly how I do it too, just without code. You have to code it to show and hide depending on page width and if a button is pressed right?

In my case I use an animated(CSS and JS again) hamburger icon to toggle the sidebar.

The problem with this method is that you move stuff off the canvas. We tried to find a reliable way to resize the canvas to fit the incoming group, but weren’t happy with the result.

In the end we opt for a ribbon and custom slide-out floating group that sits on top of the page (and covers some part of the content). The choice is more related to the user action: at that point they need to navigate to a new section of the app so they need to look only at the side bar and do an action.

If you need a user to see both at the same time, then maybe its better to show a sidebar always.

1 Like

It is an off-canvas slidable menu after all :slight_smile:

Edit: Got what you meant. You mean the right side of the dashboard. So it’s squeezed when the menu is out. I can see how that would be a problem with Bubble standard design.

In my case, in desktop view, menu is always visible so my approach only works for mobile view. As you say it just matches user intent which is to click on something and not view content.

I’m looking for a way to do a slide out menu to create a calendar just like google calendar

After reading through this topic, I believe there could be a coded approach and a no code approach.

For coded approach (I’m not a coder but found things on bubble forum for these effects) I would resize the content that I want to shrink or expand based on visibility of the menu. There is some CSStools threads that discuss and provide the code for resizing elements (make sure to use ID attribute for referencing).

If I were to do a no code approach I would have two designs for the content that is to be expanded or shrunk depending on visibility and then have conditionals to hide/show them based on the visibility of the menu. For the slide effect, I would use the bubble animate in a workflow to get any of their preloaded animation options.

Another idea as well combining what was mentioned by @jcindy81 with idea of drag and drop, especially if you can’t move the group by x-coordinate is to have the after drop effect be to go back instead of hide and then use a conditional to hide it when an icon is clicked or not clicked ( for this I usually set custom states with 1 and 0 values as I have found yes/no values to not always work ** I had to use this to get a group focus element to hide/show correctly )

Speaking of group focus you could always use one of those as the menu and cover the content, but if covering content is not desired, I’d probably have two designs and hide/show depending on visibility of menu.

1 Like

I haven’t tried this approach but if you want your sidebar to be floating I think it will not play well.

You can use the Slideable menu (bdk) plugin. It does all this without writing any code.

1 Like

As I’m seeing in the demo, the Slideable menu will not squeeze the content on the page. Effectively, this will push the calendar off to the side leaving only one “active” workspace. Is that correct? Is there a way to squeeze a calendar made of native bubble elements when the menu comes out?

Hi @duke.severn,

You’re correct in that it won’t squeeze the content on the page. It’s gonna ‘push it’.
However, both the sections do remain active i.e. you can click any button / text etc. on either at any point in time

@JonL

I am trying this method with the javascript and it works perfectly for group elements…however it doesn’t function properly when the elements are floating groups

Have you had any issues with this?

My main reason for attempting the Z-index approach is because there is a bug with the “send to back” and “bring to front” commands and my page isn’t functioning properly after the bug affected it.

edit

I have tested this an I was incorrect to state it doesn’t work with floating groups…it does work

HOWEVER, it will not work if you were to use the “replace” function in the editor on a element that was originally a group and you “replace” it with a floating group.

This seems to be the problem I am having with my floating group side menu being unresponsive to the “send to back” and “bring to front” commands that led me to test the Z-index method.

So, for anybody who is ever having issues like this, that elements are not responding to the “bring to front” and “send to back” commands, which I suppose are pre-built bubble z-index placements, it might be because you have used the “replace” feature and this somehow causes the problem.

Hello… I do have RG within the Slideable menu. and i want when user click on any current text of this RG to hide the menu (and then I have workflow navigate to same page with page parameters). I have added ID attribute to text and i have included it in plugin set up Triggers element id. but it doesn’t close the menu. However i am able to do the same for Static elements. any suggestions or ideas how do I achieve that?

I Solved the issue… I had a group within that group there was an RG.
So what i did grouped the group again so i am having now group inside another group and then RG.

I have put ID attribute on the MAIN group to close the menu and it worked.

@gaurav This is a great plugin but I do have some questions about some odd behavior that I hope you can assist with.

In the gif below I load a page with the slideable menu and clicking the bars icon in a on-screen menu the sliding menu works, going in and out properly. I’ve used a repeating group to present selections to change the data. Selecting different menu options works fine as long as the menu remains exposed…the first time. After that, closing the menu it really acts weird.

After I close the menu, I cannot properly open it again. You can see below that it opens, then gets hidden right away. On this page there is only a header, no other elements or groups on the page.

The only workflow that is done is the setting of states when one of the buttons is pressed. The states are changed then the page is reloaded. The “Page is loaded” workflow also just sets states if not already set and ends with the Setup Slideable Menu action.

One other odd thing is that using a secondary on-screen “menu” duplicating everytihng in the sliding meu so I can make selections without having to open the menu every time, I can also change the data. What’s odd is that after closing the menu the first time, the slideable menu only open on every-other selection from the on-screen menu. In other words, if I select a single new menu option from the on-screen menu, the sliding menu does not open at all, if I change the selection a second time, it will open, only to be hidden again. It only briefly opens when it’s an even selection from the RG. Odd number of selections it won’t open, after an even number of selections it opens briefly.

ShareX-03_26_21_17_32_04

Could you also explain the use of the Tolerance setting?

@chris.charette241
I had the exact same question about Tolerance + Touch. Thanks to the cdn, I found out this plugin is based on Slideout.js.
The Github documentation says :

  • [options.tolerance] (Number) - The number of px needed for the menu can be opened completely, otherwise it closes. Default: 70.
  • [options.touch] (Boolean) - Set this option to false to disable Slideout touch events. Default: true.

My understanding is the following: when you drag (touch activated) the content, tolerance is the number of pixels needed to trigger the SlideIn or SlideOut action.

Two cases :

  1. Menu is already closed :
    => The menu opens if dragged more than 70px (and stay closed if dragged less than 70px)
  2. Menu is already opened :
    => opposite behaviour

Illustration from github :

touch&tolerance

Thank for the reference to github, that was helpful.

For anyone else that might be looking at this issue (@gaurav ) I have determined that the issue I’m having is related to the use of a “Go to page” action after selecting an item from the menu and the “Go to page” action is to the same page you’re on. For whatever reason, the “Go to page” being the same page you’re on causes the slider to fail.

Maybe this causes the slider to be set up a second time confusing it?

Any help would be appreciated.

Just discovered this thread after having exactly the same issue and scratching my head, but suspecting it was linked to Go to Page.

Did you get anywhere with this @chris.charette241 ? Did you just switch away from URL params for your nav?

I have messaged Gaurav today with a video of the behaviour.

Just purchased the plugin. Thank you! Is it possible to use CSS/JS to have the content squeeze I can use? Or a way we can have this feature on a future release? Thank you!