Making SideMenu more Android-esk "Navigation Drawer"

ionic-v1
1

Hi,

I have been playing with Ionic (thanks a million to the team for all the efforts!) to prototype some apps and I was wondering if anyone have been looking at making the sidebar menu more like the android drawer menu (see https://developer.android.com/design/patterns/navigation-drawer.html), in order to have an app feeling at home on Android.

The 2 main points being:

  • the sidemenu opens below the header / action bar
  • the sidemenu expands the menu over the main content (the menu icon in the header is animated, sliding to the left)

Thanks!

1 Like
2

I agree and it would be helpful if we made a custom implementation of nesting views as angular states implementation does have a learning curve associated with it.

3

I’ve been thinking about the same thing - it’d be great if the Side Menu could be somehow tweaked to appear as an overlay over the main content instead of pushing it aside.

1 Like
4

I think is better to made a sidemenu setting if it need open on top or not.

5

@biapar I think this exist already as the sidemenu delegate has options that let you activate and disable it

6

If anyone is looking for a short term solution for this until it is added in, I added a new html file to my template that defines my side menu in the merges/android folder and just moved the ion-nav-bar outside of the ion-side-menu-content. Touched it up with a bit of css after that.

    <ion-side-menus>

  <ion-nav-bar class="bar-stable nav-title-android">
    <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-pane ion-side-menu-content>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">

…

css:

.platform-android .menu .scroll-content {
	top: 42px;
}
.platform-android .menu-content {
	box-shadow: none;
}
.platform-android.menu-open ion-pane.pane{
	background-color: black;
}
.platform-android.menu-open ion-view.pane{
	opacity:0.5;
}

There was also some manipulation to get the title to the left and the back arrows.

1 Like
7

Thanks for the idea.

This is how I implemented it in my app.

I added a backdrop for my ion-content

<div class="content-backdrop"></div>
 <ion-content>
  .....
 </ion-content>

Then in my css I set it to active when the menu is open…

.menu-open .content-backdrop {
	position: fixed;
	top: 44px;
	left: 0;
	z-index: 11;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	-webkit-transition: 0.1s opacity linear;
	-moz-transition: 0.1s opacity linear;
	transition: 0.1s opacity linear;
}
1 Like
8

I try to apply it, but the animation does not change.

9

The animation won’t change with just the CSS. I worked with Max over the past few weeks to try and something more concrete and will provide a codepen example of it next week.

10

thanks for your reply, waiting for your example codepen.

11

Here is a somewhat close codepen of what I ended up with: http://codepen.io/anon/pen/KJCie

Here is a repo with some instructions on how to do this for the sidemenu seed project: https://github.com/gylippus/ionic-drawer

I’m first to admit that it is all pretty “hacky”, but it is a step in the right direction.

Can be seen live in this app which Google Play just signed off on for approval after many emails and many tweaks for a more Android feel to meet all of their requirements including a drawer that acts like this. https://play.google.com/store/apps/details?id=sworkitapp.sworkit.com&hl=en

7 Likes
12

Weirdness is occurring with clicking “Check In” in the submenu in both gylippus and imsingh’s codepen samples.

Otherwise very nice! Liking the centered header text in Imsingh’s sample.

The whole family has been Sworking It. Great app! The running warm up is awesome.

1 Like
13

Check this demo http://codepen.io/imsingh/pen/RNWmZd/

1 Like
14

@loren That weirdness was because ion-content was not surrounded by ion-view. Check it now it is fixed.

Thanks.

16

I just tried adding a right side menu. It’s not working properly. Anyone has an working example with left and right menus. Thanks.

17

It looks good. I have problem with side menu. I am not able to close side menu when backdrop click and how to set some color to background when side menu is opened. Here is the codepen http://codepen.io/anon/pen/EPZgeG please do the helpful

Thanks,
Srinivas

18

Hi @gylippus

It is working great. Thanks for providing the code pen. How to add overlay effect when we open the menu? Can you please tell me how to do or can you provide codepen. Much appreciated.

Thanks,
Sandeep Kumar.

19

when is this feature going to be added to ionic instead of the hack

20

Are there any updates on this feature? its been two years but I noticed that ionic 2 is still implementing the old school drawer menu design from 1.x