Side Menu sticky or always visible on iPad/Tablets

ionic-v1
1

Hi guys,

Any advice on having a sticky sidebar always visible on iPad/tablets but hidden on phone size devices?
Eg. Mail app on iOS.

3 Likes
2

There’s this codepen, but it’s not as powerful as iOS mail app side menu.

It basically assumes that you have a static side menu and doesn’t allow you any side-menu navigation.

3 Likes
3

That actually works great for my needs. I have a static side menu.
I was trying to jigger up something similar but this is a very elegant solution.

4

There is a few things I’ve changed from your example to refine it a bit.
I have changed the z-index so that the side menu is higher so that the animations don’t overlay the side menu.
And because of that I have moved the drop shadow onto the side menu too.

@media (min-width: 767px) {
  .menu-content {
     -webkit-transform: translate3d(270px, 0px, 0px) !important;
     width: ~"calc(100% - 270px)" !important;
  }

  .menu {
      z-index: 2 !important;
      box-shadow: -1px 0 2px rgba(0,0,0,.2),1px 0 2px rgba(0,0,0,.2);
   }

  .bar-header button.ion-navicon {
      display: none;
   }
}
5

Hi,

I tried to add the same feature that yours and it works great on Android 4.4 but it doesn’t work on android version 4.3 and below. The side-menu is sticky but the main view has 100% of width. It seems due to the calc function not working on android browser. (http://caniuse.com/calc)

Did you find a way to solve this problem? or any idea how to do it?

Thanks.

6

Hmm, yeah seems like anything below 4.4 doesn’t support calc…
There is a polyfill for that,

Or if you want all the greatness of the chrome-webview, you could check out crosswalk.

Better performance, and wider range of supported features

7

Thanks, I will check about it. I don’t even know that js polyfill exists… my first test is unsucessful but it will go deeper in this way.

1 Like