I thought I’d share several approaches to mobile menus that I created using native Bubble techniques. (See tooltips on “nav burgers” for names.) I don’t claim to have “invented” any of these approaches; I just compiled them into a demo page.
@anon65040322, thanks for the reply and for scrutinizing things so well! However, it’s unclear what exactly is being demonstrated in the clip. Can you explain what’s happening so that I can try to reproduce? First, though, try again, as I did update the z-ordering recently. Thanks much!
Also, @anon65040322, what browser and version are you using? The position of the slide menu seems completely off. Plus, there appear to be rendering artifacts. I wonder if dispensing with the animation and simply doing a simple show/hide would resolve the issue; but without more detail, I can’t test.
That said, these approaches are really intended for mobile only; so in a real app, I would actually display menus horizontally within the nav bar and show one of these techniques only at mobile screen widths.
But again, any additional info you can provide would be appreciated.
Ahh, ok, I can see that now. Yes, I agree. It’s an issue with the Bubble animation. However, I think it’s quite unlikely to occur in actual usage - especially since the approach would actually be used only on mobile devices.
You can still open external websites and pages by using the run javascript action from the Toolbox plugin.
Just put in window.open(“url of where you want to go”);
I agree. However, it’s unlikely someone would actually tap the menu icon in rapid succession, so probably not a real-world problem. I certainly appreciate being made aware of this, however. That said…
Indeed it does. I have reverted to a simple show/hide. So much for the “eye candy”.
@ryley.randall, thanks for the tip! I actually experimented with a similar approach initially. (I used JS in an HTML element, though - not the toolbox plugin.) My aim with this exercise was to come up with techniques that don’t require either JS or plugins.
That said, I do think it would be nice to have a menu plugin that uses actual hyperlinks. It would be a nice way to leverage native mobile behavior on certain platforms - e.g. 3D Touch and “long press” on iOS, for instance (which I use all the time to open links in a new tab).
Hi, @jheuer. That behavior is inherent in a Group Focus element. I used a similar approach to create the menu on the recently updated demo pages of my Sudsy Page plug-in.
Very nice @sudsy! Looks like you have some animation going on there. I didn’t think that was possible with a Group Focus Element. I’d like to do a slide in/slide out from the right side. Any suggestions?
Totally possible. Bubble offers quite a few fancy schmancy animations, so it seems likely you’d find something suitable - perhaps a simple fade + slide from the right. Just give it a go and post to the forum if you get stuck.
Ah, got it to work. Group Focus elements don’t animate, but I made it a transparent container for an animating menu, which looks pretty good. Appreciate your help @sudsy.
I guess you’re right. When I looked yesterday I didn’t see the Group Focus element as an available choice in the Animate action, but today it’s there. #whenitdoubttryagain
I just wanted to say a heartfelt thank you! Your technique saved me oodles of time and resulted in a vastly superior outcome versus everything I was trying before I saw this post.
