I’ve noticed that the menu items in the Bubble Slidebar Menu plugin are triggered on “press” and not after “release” - at least on iOS. That means the menu can’t be scrolled (for lengthy menus or not-so-lengthy ones when the device is in landscape orientation). It seems the plugin uses divs and some JS magic to do its thing instead of a proper anchor (link) tag. It also prevents one from using the native “press and hold” gesture to display a popup with options to open in a new tab, etc.
I often have my device in landscape orientation and am constantly inadvertently visiting pages when I attempt to scroll the menu. It’s a very nonstandard and frustrating user experience. Even the main Bubble site exhibits this behavior.
Am I overlooking a setting? Anyone else experienced this - or more importantly, found a good mobile menu alternative?
I’m not sure about the specifics of the Slidebar menu on different devices, but as a workaround, you could create a custom mobile menu using two floating groups. Here is an example:
The navigation floating group would open on the left or right side of the page set to float: both. The second floating group is the black transparent floating group, set to float:both as well, which covers the rest of the page. In this example, I set the black floating group to become visible first, and the mobile menu becomes visible right after using an animation.
After the groups are set up, you can place link elements into the mobile menu, and that should allow you to open links in a new tab, etc. The group should become scrollable when on mobile.
Feel free to let me know if you have any questions about setting this up!
Has anyone been able to scroll the menu on a slidebar on mobile device? It will be great to be able to use this slidebar plugin without problem. For now the same thing happens as described above and it is impossible to go down the list of long menu on a slidebar. as soon as the screen is touched, the menu disappear.
Hello there, I am currently trying to work out how to use a floating group as a menu. However no matter what I do I can not seem to get it to work. On the site that you have used this menu style for, is your header a reusable group? And if so how did you manage to make it so that when one touches a menu button icon within the header, the group then appears.
The only way I can seem to do it, is to move the menu button off of the header and onto the page itself, which then makes the whole process pointless as I want it part of my header.
Okay, so for now I’ve just created a native index_mobile that show and hides groups depending on which page the user chooses from the floating menu.
But that has now led me onto another question (you may or may not know the answer), after I have completed all of this and I have both, web and native mobile versions of my site, am I able to use the native version as an app in the likes of Google’s and Apple’s mobile stores?
Awesome! For a single page app, it’s probably easier to not set the header to be reusable (if it is always shown), and then use show/hide workflows to show the mobile menu floating groups.
For apps with the header on multiple pages, you can still show the floating group menu by setting a custom state on the reusable header (called "ShowMobileMenu? type: yes/no, list: no) for example. The workflow for the mobile menu icon inside of the header would set that custom state to ‘yes’.
Then on each page which has the reusable header element and the mobile menu floating group, you would create a conditional on the floating group to be visible when the Reusable Header’s ShowMobileMenu is “yes”, and hide the floating group when the Reusable Header’s ShowMobileMenu is “no”. It is a little more time-consuming to set up, but definitely possible!
I personally have not launched an app in the app stores, but one method I’ve seen mentioned recently is to use a combination of Bubble and DropSource. The ability to build and launch in the app store by only using Bubble is not yet available, but it is on the roadmap here. I wish I could give a more helpful answer, but there are many threads by Bubblers who have done this throughout the forum that discuss how it can be done. I’d start there for sure!
)
And no worries at all!