Menu
I have a responsive website, and built a Facebook-like slider for mobiles. So I made a very plain setup, which works pretty neat so far. I'm having all content in a .outer_wrapper which fills the whole body. Under this wrapper is a .slider div with following CSS:
.slider {
position: fixed;
height: 100%;
right: 0;
top: 0;
width: 250px;
}
when I press a trigger it shifts the .outer_wrapper to the left and the .slider appears.
$('.hamburger-menu').click(function() {
$('.outer_wrapper').animate({marginLeft: '-250px', marginRight: '-250px'}, 'slow');
});
Problem is, that .slider has overflowing content, but on mobiles it refuses to scroll. It always scrolls the content of .outer_wrapper. I tried -webkit-overflow-scrolling:touch; and overflow-y: scroll;.
Edit: Forgot to mention that .slider is not a child of .outer_wrapper. So my body is following structure:
<body>
<div class=".outer_wrapper">
<!-- all the lovely content is here -->
</div>
<div class="slider">
<!-- some menu items here -->
</div>
</body>
Any advice?
997
what i would suggest, is to have .slider positioned outside .outer_wrapper. Then animate them both by toggling their class, and using css transforms. This way, they won't conflict with each other when the user swipes the page down.
Try this
.slider {
position:fixed;
height:100%;
width:250px;
top:0;
left:0;
-webkit-transform:translate(-250px,0px);
transform:translate(-250px,0px);
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.slider.reveal {
-webkit-transform:translate(0px,0px);
transform:translate(0px,0px);
}
.outer_wrapper {
margin:0;
width:100%;
height:100%;
position:relative;
-webkit-transform:translate(0px,0px);
transform:translate(0px,0px);
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.outer_wrapper.hide {
-webkit-transform:translate(250px,0px);
transform:translate(250px,0px);
}
and for the Jquery, use the toggleClass function as follows:
$('.hamburger-menu').click(function() {
$('.outer_wrapper’).toggleClass(‘hide’);
$(‘.slider’).toggleClass(‘reveal’);
});
Hopefully that helps?
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
