Question

我正在尝试创建Off-canvas菜单，它应该从右侧出现。在我的body元素中，我有一个带有菜单的nav标签。导航标记的绝对位置和右属性设置为负值，因为它应该在浏览器窗口之外。 Body的宽度为100％，overflow-x设置为隐藏。我使用jquery在body元素上切换css'opeed'类，它将body移动到左侧并显示nav。

Html部分：

<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部分：

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部分：

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

以下是它的样子：http://jsfiddle.net/EwCVH/
实例：http://vital-element.com

在PC上一切都很好，但是当我在手机上打开它时，overflow-x属性不再起作用了，我可以水平滚动并看到我的隐藏导航，只有在点击时才会打开。

我尝试将隐藏的overflow-x属性添加到html标签，它确实隐藏了触摸设备上的水平滚动，但是当我尝试打开菜单时，只有正文向左移动，菜单被溢出属性隐藏（我认为）。

有什么建议吗？谢谢。

Answer 1

没有科学的解释但改变滑动导航元素位置到固定解决这个问题，android不再认为导航是视口的一部分。

现在我使用2个具有正确属性的类，我根据菜单位置使用jquery进行更改。

.menuRight{
    right: -150px;
 }

 .menuLeft{
    right: 0px;
 }

Off-Canvas菜单的Css overflow-x问题

1 个答案: