On mobile devices almost every site lends to use hamburger menu, because it is intuitive and user friendly. So in bubble I replicated this design and functionality, so you don’t have to struggle and think about it.

On the left side you can see the closed state, and on the right side the opened state. Maybe you already know how to do it, but maybe my approach help to think otherwise and give hints for the future for other problems.

Steps

The elements tree

The main two components we will use is a Group Hamburger and a GroupFocus Mobile Menu. All the other part is design element, that is not important now.

Hambuger and Close Icon

You will need two svg icons to upload into one-one image element. See the attached files, colored to white (if you want them to be black, open with a code editor and change the fill property to black then save them). Then absolute position them.

Create a workflow that hide and show the hamburger and close icon

When someone will click on the close icon, we will hide the close icon and show the menu (aka hamburger icon), and hide the GroupFocus (aka links group container).

And vice versa.

When someone will click on the menu icon, we will show the close icon and hide the menu, and show the GroupFocus (aka links group container).

The GroupFocus element disappear if you click outside of the GroupFocus, this is important for us, because if you click outside the group the icon’s states remain the same. Means the close icon doesn’t turn into hamburger again

Condition for close icon

You have to write two conditions, one is not enough as I tried. The condition says for close icon is hided if GroupFocus is hided.

Condition for hamburger icon

You have to write two conditions, one is not enough as I tried. The condition says for hamburger/menu icon is visible if GroupFocus is visible.

I am available for bubble projects, contact me to make your next application together!


Leave a Reply

Your email address will not be published. Required fields are marked *