Hello,
I have the slideable menu on my app, but when it slides out, I want the entire web page to slide with it so the content is not covered by the menu. Is this even possible?
I’ve included a mock below.
Thanks!!
1 Like
You need to apply off-canvas effects with Javascript(and CSS) for that.
It is possible and quite common but needs some coding.
1 Like
JonL, thanks for the quick reply. I’m new to bubble, but do have experience with traditional javascript/CSS. If I add the javascript, can I add it to a reusable element such as a header, or do I have to add it to each page in my app?
Thanks!
I have done this without code. All you need to do as add a group underneath it and add and remove the left border to the size of the floating group as a menu. It takes a little bit of thinking but it works well for me.
I would still be curious to know how to do it with JavaScript and CSS. 
3 Likes
It will depend on how you have structured your app.
I use the html IDs of the Bubble elements I am planning on moving off and on canvas. In my case #sidebar and #main
If you have and app that has different pages you will have to assign those IDs(or what you choose) to the all the sidebars and main pages.
You will also need to use the JS toolbox plugin.
1 Like
I am on my mobile now but will provide code later once I get on my desktop.
1 Like
Alternatively, if you want a bubble no code solution, you can use the same drag and drop group to do this. Use the drag drop group element, and when the menu is visible move it x pixels right, then x pixels left when not visible.
1 Like
Awesome. Thanks!
Show sidebar
$("#main").animate({'padding-left' : '240px'}, "250ms");
$("#sidebar").animate({'left' : '0px'}, "250ms");
$("#sidebar").css("z-index", "999");
Hide Sidebar
$("#main").animate({'padding-left' : '0px'}, "250ms");
$("#sidebar").animate({'left' : '-240px'}, "250ms");
$("#sidebar").css("z-index", "4");
In this example the sidebar width is 240px. I also have to change z-index due to how I have my page designed.
2 Likes
Thanks JonL. One last question, do you put that in an HTML element, CSS Element, or Javascript element. Also, can I put that in a reusable element as long as each page has a main element?
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
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