Slide in mobile menu from off screen - overflow issues Ask

Given the following simple demo, I’m struggling to achieve the desired behaviour where I have a menu which is positioned off screen using translateX.

There are a couple of issues - firstly, if I set overflow: hidden on the body, it prevents the menu from being displayed, instead just showing whitespace when the menu is toggled open.

If I remove overflow: hidden, I then have the issue where the user can scroll beyond the width of the body due to the translateX behaviour (see for example JS Fiddle if you toggle open the menu, then swipe/move the body back into position without using the menu toggle).

I’d also like the menu to be scrollable when open, but that the partially hidden rest of the page content be fixed in position. I’ve set position: fixed on the container when the menu is toggled open but it has no effect.

Grateful for any help as I’m going round in circles with this one!

Hi,

I would first place the menu off the side of the screen using fixed positioning to start with using left:-xxpx and then when you show it use translate to bring it back as that is smoother. Probably best to have a fixed width menu size to do this.

At least that’s why I did on this old demo and it does not seem to have the problem you mentioned on the iphone. (It will also work if js is disabled).

As the menu is position:fixed you have to set the height which is best done by using top and bottom together without a height or min-height (top:0; bottom:0; ) and the setting it to overflow:auto. Remember a fixed element cannot scroll so must always remain in the viewport.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.