# Mobile Menu Techniques **URL:** \ **Category:** Tips\ **Created:** [February 23, 2019, 7:44am UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332 "2019-02-23T07:44:30Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [February 23, 2019, 7:44am UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/1 "2019-02-23T07:44:30Z")
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. - [Sudsy - Mobile Menus](https://sudsy.bubbleapps.io/version-test/mobile-menus) - [Sudsy - Bubble Editor](https://bubble.io/page?type=page&name=mobile-menus&id=sudsy&tab=tabs-1&issues_off=true) **Advantages** : - 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](http://forum.bubble.io/t/slidebar-menu-bug/27917) **Disadvantages** : - Menu items are not hyperlinks (hyperlinks can’t run workflows AFAIK) - Can’t open external sites in a new tab/window (b/c **Text** s and not **Link** s 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. ---
**Author:** ![anon65040322](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@anon65040322](https://forum.bubble.io/u/anon65040322)\ **Post date:** [February 23, 2019, 1:22pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/2 "2019-02-23T13:22:21Z")
![example](https://us1.discourse-cdn.com/bubble/original/3X/d/0/d0e5f872d0e2cc178fdea415f86006fc293ed8a3.gif) ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [February 23, 2019, 1:54pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/3 "2019-02-23T13:54:43Z")
@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! ---
**Author:** ![anon65040322](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@anon65040322](https://forum.bubble.io/u/anon65040322)\ **Post date:** [February 23, 2019, 2:37pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/4 "2019-02-23T14:37:12Z")
hi its a problem with the animation, setting element offset. if clicked multiple times in succession ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [February 23, 2019, 2:37pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/5 "2019-02-23T14:37:28Z")
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. ---
**Author:** ![anon65040322](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@anon65040322](https://forum.bubble.io/u/anon65040322)\ **Post date:** [February 23, 2019, 2:38pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/6 "2019-02-23T14:38:20Z")
i used chrome and opera both same. artefacts are from my gif recording. ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [February 23, 2019, 2:41pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/7 "2019-02-23T14:41:08Z")
> [@anon65040322](#): > > its a problem with the animation, setting element offset. if clicked multiple times in succession 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. ---
**Author:** ![anon65040322](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@anon65040322](https://forum.bubble.io/u/anon65040322)\ **Post date:** [February 23, 2019, 2:43pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/8 "2019-02-23T14:43:03Z")
> [@sudsy](#): > > It’s an issue with the Bubble animation. 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. ---
**Author:** ![ryley.randall](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ryley.randall/32/24248_2.png) [@ryley.randall](https://forum.bubble.io/u/ryley.randall)\ **Post date:** [February 23, 2019, 2:45pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/9 "2019-02-23T14:45:58Z")
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”); ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [February 23, 2019, 2:55pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/10 "2019-02-23T14:55:34Z")
> [@anon65040322](#): > > 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. 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… > [@sudsy](#): > > I wonder if dispensing with the animation and simply doing a simple show/hide would resolve the issue; Indeed it does. I have reverted to a simple show/hide. So much for the “eye candy”. 🙂 ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [February 23, 2019, 3:09pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/11 "2019-02-23T15:09:37Z")
@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). ---
**Author:** ![jheuer](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jheuer/32/46026_2.png) [@jheuer](https://forum.bubble.io/u/jheuer)\ **Post date:** [October 22, 2019, 8:55pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/12 "2019-10-22T20:55:04Z")
@sudsy How are you triggering hiding the menu element when you click away from it? ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [October 22, 2019, 9:04pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/13 "2019-10-22T21:04:39Z")
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](https://sudsy-demo.bubbleapps.io/resources) of my [Sudsy Page](http://forum.bubble.io/t/updated-sudsy-page-router-for-seo-friendly-clean-urls-by-tech-tonic/52350/43) plug-in. ---
**Author:** ![jheuer](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jheuer/32/46026_2.png) [@jheuer](https://forum.bubble.io/u/jheuer)\ **Post date:** [October 22, 2019, 9:12pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/14 "2019-10-22T21:12:11Z")
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? ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [October 22, 2019, 9:19pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/15 "2019-10-22T21:19:15Z")
> [@jheuer](#): > > I didn’t think that was possible with a Group Focus Element. 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. 🙂 ---
**Author:** ![jheuer](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jheuer/32/46026_2.png) [@jheuer](https://forum.bubble.io/u/jheuer)\ **Post date:** [October 23, 2019, 6:09pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/16 "2019-10-23T18:09:03Z")
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. ![13%20AM](https://us1.discourse-cdn.com/bubble/original/3X/5/1/51637722fdf3f2524dae7f6d1754f6094ca8bd48.gif) ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [October 23, 2019, 6:19pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/17 "2019-10-23T18:19:52Z")
> [@jheuer](#): > > Group Focus elements don’t animate, 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. ---
**Author:** ![jheuer](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jheuer/32/46026_2.png) [@jheuer](https://forum.bubble.io/u/jheuer)\ **Post date:** [October 23, 2019, 6:26pm UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/18 "2019-10-23T18:26:36Z")
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 ---
**Author:** ![SerPounce](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/serpounce/32/62068_2.png) [@SerPounce](https://forum.bubble.io/u/SerPounce)\ **Post date:** [July 6, 2020, 9:28am UTC](https://forum.bubble.io/t/mobile-menu-techniques/50332/19 "2020-07-06T09:28:58Z")
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.