Side Menu sticky or always visible on iPad/Tablets


#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.


Side menu that is always visible
Ipad 2 column form layout
Expose-aside-when in Ionic 2
#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.


Current Progress on iPad split-pane support?
#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.