How to create "on top" side menu?


I looking to create a side menu just as in “Google Calendar” app: the menu is opened by pressing on “menu” button, and when it opened, instead of moving content to side, it overlaps it.

This way, it is possible to swap content of the application both left and right while still having side menu.


Check this out:

P.S. Могу на русском обьяснить :wink:

1 Like


Thanks for your fast replay!

It looks great, but:

  1. On Google Calendar, (or Google Play or similar), when drawer is opened, the rest of the area gets overlapped by semi-transparent black layer. Pressing on that area (e.g. out of drawer) is closing drawer. Is it possible to achieve such a behavior?

  2. I didn’t checked, so I curious whether it behaves similar to ionic side menu, when it comes to child views: in case one of the links inside drawer get pressed and another view get opened, I would like to get the following behavior:

a. The drawer will get closed
b. Child view will have “back” arrow instead of “Burger” icon.



When drawer is opened from my github PR then class is added to body ‘drawer-open’ so you can add black overlay yourself.

Currently it is not closing when you click outside of drawer like sidemenu does, but it is not too hard to implement. Also it will not close when another menu item is clicked, but it is also easy to implement like a previous one. There’s toggleDrawer, closeDrawer and openDrawer functions exposed that you can use… But I will look into implementing it as part of PR…

I think this is a good example for what I’m looking for:


так и думал что ты наш))))

настоясчый русскей :stuck_out_tongue: