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.
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.
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.
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.
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;
}
}
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.
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
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.