# Side menu example

**URL:** <https://community.thunkable.com/t/side-menu-example/214>\
**Category:** Promote your App\
**Tags:** socialmedia, design\
**Created:** [September 29, 2016, 10:41am UTC](https://community.thunkable.com/t/side-menu-example/214 "2016-09-29T10:41:36Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)\
**Post date:** [September 29, 2016, 10:41am UTC](https://community.thunkable.com/t/side-menu-example/214/1 "2016-09-29T10:41:36Z")

</div>

With this menu style do you got a simple and easy way for users to join other pages via image buttons.

Features:

- Open & close menu animation
- clean design
- Webview component
- Menu click and the menu page is open or close
- Long menu click and the start page is visible and the webview component isn’t visible

The rights of the used pictures in this example remain with the original owner.

Screenshots:

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/1X/cc13a61cb840b96b703588ada01cc32f5c883492.png)

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/1X/3e8062f4af025ddc418abe21813a7ae66f22fc67.png)

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/1X/fe7aa73b324e9f9a7b9919102be0b72f782868df.png)

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/1X/088f82476f30d80c8e6d2d97dadbb708aeb40eed.png)

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/1X/c56836473749135f09c48604e6b4d635a4d9f71f.png)

[Download SideMenuExample (aia file)](https://sourceforge.net/projects/released/files/Side_Menu_Example.aia/download)  
[Download SideMenuExample (apk file)](https://sourceforge.net/projects/released/files/Side_Menu_Example.apk/download)  
[Video](https://sourceforge.net/projects/released/files/Side_Menu_Example_Video.mp4/download)

best regards,  
Mika

* * *

[Tutorials, Snippets, Examples with source files (aia and apk) and much more available on my blog](http://nmd-apps.jimdo.com)

---

<div class="post-metadata">

**Author:** ![Mr\_Nameless](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@Mr\_Nameless](https://community.thunkable.com/u/Mr_Nameless)\
**Post date:** [April 8, 2017, 6:46pm UTC](https://community.thunkable.com/t/side-menu-example/214/2 "2017-04-08T18:46:26Z")

</div>

can i ask whhy doesn’t this work when allign horizontal is set to center? becuase right now the letters of the main screen aren’t in the middle they are on the left side

---

<div class="post-metadata">

**Author:** ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)\
**Post date:** [April 8, 2017, 7:04pm UTC](https://community.thunkable.com/t/side-menu-example/214/3 "2017-04-08T19:04:04Z")

</div>

Because the menu cames from left to right.  
If you set it to center it doesnt work right.

---

<div class="post-metadata">

**Author:** ![Mr\_Nameless](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@Mr\_Nameless](https://community.thunkable.com/u/Mr_Nameless)\
**Post date:** [April 8, 2017, 8:48pm UTC](https://community.thunkable.com/t/side-menu-example/214/4 "2017-04-08T20:48:09Z")

</div>

any workaround so the letters would be in the center?(no label usage cause i am not talking exactly about these ones but in general), plus what if i wanted the menu to the right? would it be just a simple code change?

---

<div class="post-metadata">

**Author:** ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)\
**Post date:** [April 8, 2017, 9:03pm UTC](https://community.thunkable.com/t/side-menu-example/214/5 "2017-04-08T21:03:14Z")

</div>

Yes i think its possible to change rhe menu to the right side.  
If you want i will take a look tomorrow to this.

---

<div class="post-metadata">

**Author:** ![Mr\_Nameless](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@Mr\_Nameless](https://community.thunkable.com/u/Mr_Nameless)\
**Post date:** [April 10, 2017, 12:40pm UTC](https://community.thunkable.com/t/side-menu-example/214/6 "2017-04-10T12:40:14Z")

</div>

so i guess there is no way to make the side menu “overlap” the main screen? because here it just pushes it to the side

---

<div class="post-metadata">

**Author:** ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)\
**Post date:** [April 10, 2017, 2:01pm UTC](https://community.thunkable.com/t/side-menu-example/214/7 "2017-04-10T14:01:28Z")

</div>

that’s right.  
a overlap or overlay is not possible.

---

<div class="post-metadata">

**Author:** ![Cesar\_Gomez](https://avatars.discourse-cdn.com/v4/letter/c/aeb1de/32.png) [@Cesar\_Gomez](https://community.thunkable.com/u/Cesar_Gomez)\
**Post date:** [June 26, 2017, 10:32pm UTC](https://community.thunkable.com/t/side-menu-example/214/8 "2017-06-26T22:32:16Z")

</div>

excelente

---

<div class="post-metadata">

**Author:** ![Hayder](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hayder/32/153829_2.png) [@Hayder](https://community.thunkable.com/u/Hayder)\
**Post date:** [August 4, 2017, 6:15pm UTC](https://community.thunkable.com/t/side-menu-example/214/9 "2017-08-04T18:15:52Z")

</div>

Hi Thunkable Team,  
What you need to add is “when screen touched”. This will solve all problems about “slide menu” and make it like “slide menu” in Android Studio"  
I love Thunkable

---

<div class="post-metadata">

**Author:** ![mayav](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mayav/32/6453_2.png) [@mayav](https://community.thunkable.com/u/mayav)\
**Post date:** [September 4, 2017, 8:41am UTC](https://community.thunkable.com/t/side-menu-example/214/10 "2017-09-04T08:41:54Z")

</div>

Excellent Menu structure,  
How can we link the button with Screens instead of webpage or weblinks

I wants to link and travel with Multiple Screens not with webviewer.

Thanks

---

<div class="post-metadata">

**Author:** ![ILoveThunkable](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ilovethunkable/32/3134_2.png) [@ILoveThunkable](https://community.thunkable.com/u/ILoveThunkable)\
**Post date:** [September 4, 2017, 12:37pm UTC](https://community.thunkable.com/t/side-menu-example/214/11 "2017-09-04T12:37:39Z")

</div>

You may check out my Templates, especially Navigation Drawer one, but it works with arrangements not screens, so you can toggle visibility of those.

> [@Templates for easier app development!](http://community.thunkable.com/t/templates-for-easier-app-development/4377/63):
>
> Guys you are amazing heart_eyes heart_eyes heart_eyes Over 45 likes, plus 720 downloads and 40 clicks on link to Thunkable Beta. Thank you absolutely to everyone & every single one of you! Love yall, people! wink

---

<div class="post-metadata">

**Author:** ![app\_mai\_roid](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/app_mai_roid/32/12717_2.png) [@app\_mai\_roid](https://community.thunkable.com/u/app_mai_roid)\
**Post date:** [December 15, 2017, 7:23pm UTC](https://community.thunkable.com/t/side-menu-example/214/12 "2017-12-15T19:23:20Z")

</div>

love it 👍  
thanks a lot

---

<div class="post-metadata">

**Author:** ![Gudguy](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@Gudguy](https://community.thunkable.com/u/Gudguy)\
**Post date:** [January 1, 2018, 5:01am UTC](https://community.thunkable.com/t/side-menu-example/214/13 "2018-01-01T05:01:44Z")

</div>

why text is going beyond screen, even when menu is off state?

Any solution on this problem?

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 12:05pm UTC](https://community.thunkable.com/t/side-menu-example/214/14 "2024-11-08T12:05:46Z")

</div>


