Question

我在菜单中制作了这张响应式幻灯片。我只添加了响应视图的代码。

它的工作原理如下。默认情况下隐藏div.overlay和ul。点击.triggerRM锚点，所有元素都会成为名为.openRM的额外类，这会激活（使用CSS转换）：

.overlay在身体上留下黑色封面
.triggerRM左侧位置已从0%更改为100%（略有差异和背景变化）
ul右侧位置从100%（隐藏）更改为5em。

所有的作品都像我的电脑上的魅力（Win 7 + FF38）。但是，当使用我的Android手机查看时，ul转换功能无效。单击该按钮时，背景会在没有动画的情况下弹出结束位置。

动画的其余部分确实有用。

任何想法??

以下是代码：

HTML

<nav role="navigation">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>

    <a href="#" class="triggerRM">Open menu</a>
    <div class="overlayRM"></div>
</nav>

CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul {
    display: block;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 100%;
    bottom: 0;
    background: blue;
    z-index: 200;
}
nav ul li a {
    display: block;
    width: 100%;
    height: 46px;
    line-height: 46px;
    padding: 0 20px;
    vertical-align: middle;
    color: #fff;
    text-decoration: none;
}
nav ul li a:hover {
    background-color: #2849ee;
}
nav .triggerRM {
    display: block;
    position: fixed;
    z-index: 200;
    width: 2.5em;
    height: 2.5em;
    background: blue;
    border-radius: 0 7px 7px 0;
    top: 0;
    left: 0;
    text-indent: -1000%;
    overflow: hidden;
    background: blue url(http://gvss.ragas1.nl/img/menu-rm-btn.png) center center no-repeat;
    -webkit-background-size: 50% 50%;
    -moz-background-size: 50% 50%;
    -o-background-size: 50% 50%;
    background-size: 50% 50%;
}
nav ul,
nav .triggerRM,
nav .overlayRM {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
nav ul.openRM {
    left: 0;
    right: 5em;
}
nav .overlayRM.openRM {
    position: fixed;
    background: black;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    z-index: 190;
}
nav .triggerRM.openRM {
    left: 100%;
    background-image: url(http://gvss.ragas1.nl/img/menu-rm-btn-close.png);
    margin-left: -5em;
}

JS

$(function() {
    // Responsive menu 
    $("nav .triggerRM, nav .overlayRM").on("click", function(e) {
        e.preventDefault();
        $("nav .triggerRM,nav ul,body,.overlayRM").toggleClass('openRM');
    });
});

JSFiddle
JSFiddle full page result

响应式菜单动画故障

0 个答案: