2


我正在尝试创建应从右侧显示的 Off-canvas 菜单。在我的 body 元素中，我的菜单有一个导航标签。Nav 标签的绝对位置和右属性设置为负值，因为它应该在浏览器窗口之外。Body 的宽度为 100%，overflow-x 设置为隐藏。我使用 jquery 在 body 元素上切换 css 'opened' 类，它将 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 属性不再起作用，我可以水平滚动并查看我隐藏的导航，它应该只在单击时打开。

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

有什么建议么？谢谢。

4

1 回答 1

2

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

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

.menuRight{
    right: -150px;
 }

 .menuLeft{
    right: 0px;
 }
于 2013-08-20T10:35:22.607 回答