CODEWITHSUNDEEP
cssmobilescreenoverflowdocument-body
user13250
user13250

Reputation: 67

Css overflow-x issue for Off-Canvas menu


I'm trying to create Off-canvas menu, which should appear from the right side. In my body element I have a nav tag with my menu. Nav tag has absolute position and right property set to negative value, because it should be outside the browser's window. Body has a 100% width and overflow-x set to hidden. I use jquery to toggle css 'opened' class on body element, which moves body to the left and nav appears.

Html part:

<a href="#" class="openMenu">MENU</a>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>        
        </ul>
    <nav>

CSS part:

body{
    position: relative;
    overflow-x: hidden;
    width: 100%;
    left: 0;
    top: 0;
    background: orange;
}

body.opened{
    left: -150px;
}

nav{
    position: absolute;
    right: -150px;
    top:0;
    background: grey;
    width: 150px;
    z-index: 99999;
}

body, body.opened{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

a.openMenu{
    position: absolute;
    top: 0;
    left: 50%;
    color: white;
}

ul{
    list-style: none;
}

nav ul li a{
    color: white;
}

Jquery part:

$('a.openMenu').click(function(){
    $('body').toggleClass('opened');
    return false;
});

Here is how it looks like: http://jsfiddle.net/EwCVH/
Live example: http://vital-element.com

Everything is fine on PC, but when I open it on mobile phone for example, overflow-x property doesn't work anymore and I can scroll horizontally and see my hidden navigation, which should open only on click.

I tried to add hidden overflow-x property to html tag and it really hides horizontal scroll on touch device, but when I try to open menu, only body moves to the left, menu is hidden by overflow property (I think).

Any suggestions? Thanks.

Upvotes: 2

Views: 2974

Answers (1)

user13250
user13250

Reputation: 67

Don't have scientific explanation but change sliding nav element position to fixed solve this problem, android don't think anymore that nav is a part of viewport.

Right now I use 2 classes with right properties, which I change using jquery, depending on menu position.

.menuRight{
    right: -150px;
 }

 .menuLeft{
    right: 0px;
 }

Upvotes: 2

Related Questions