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.
- Can link to internal pages from menu
- Can link to external pages from menu
- Can run workflows from menu
- Avoids the Slide Menu Plugin scroll issue noted here
- Menu items are not hyperlinks (hyperlinks can’t run workflows AFAIK)
- Can’t open external sites in a new tab/window (b/c Texts and not Links are used in my MenuItem data type)
- Can’t set RG row heights explicitly (so there’s no “hint” to user that there are more items to view)
- First “reveal” of collapsible (middle) menu animates slower than subsequent reveals (anyone know why?)
Comments, feedback, suggestions welcome.
@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!
its a problem with the animation, setting element offset. if clicked multiple times in succession
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.
i used chrome and opera both same. artefacts are from my gif recording.
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.
yes, i think it will be the same on mobile, not really a big issue but this is one of the reasons i avoid certain animations.
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).
@sudsy How are you triggering hiding the menu element when you click away from it?
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.
Glad you got it working. Looks nice! However, I’m not quite sure what you mean by the above, as I’m doing so in at least a couple apps.
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.