How To Create Slide Menu Like Google Map Android App?

ionic-v1
1

Hi,
Could Someone Explain,

How to implement slide menu component like google map slide menu.
Is there any kind of built-in functionality inside ionic for these kind of slide menu?

image

Thanks.

1 Like
2

There’s the Android drawer, but there isn’t much documentation around it yet: http://ions.ionic.io/ion/ionic-ion-drawer

1 Like
3

@brandyshea Thanks for answer. :blush:
I have implemented the ionic drawer in these Codepen.

How change the background color as above display image?

4

I think if you want to achieve the content becoming darker you have to modify the directive itself.

You would need to apply a opacity transform, whenever the drawer is moved (lines: https://github.com/driftyco/ionic-ion-drawer/blob/master/ionic.contrib.drawer.js#L81 and https://github.com/driftyco/ionic-ion-drawer/blob/master/ionic.contrib.drawer.js#L114)
Then you need a child-element of the drawer, that covers the entire screen size and is usually set to display: none. When the .menu-open class is applied, set the display-Attribute to block.
From the directive you could set the opacity using $element.children(), or maybe write another directive, that has require: '^drawerCtrl'. That way you could expose that elements $element to the drawerCtrl.