手机左键菜单答案

【问题标题】：Mobile left-push menu手机左键菜单
【发布时间】：2014-12-02 21:37:28
【问题描述】：

我有这个菜单http://meetsingledating.com/test/。当我点击按钮“M”时，菜单从左侧推。

我不希望“M”按钮在菜单打开时显示为灰色，我希望这样：

http://meetsingledating.com/test/2.jpg

当菜单打开并单击“M”按钮时，我希望菜单在灰色时以相同的方式关闭。

我已经在按钮上尝试了更高的 z-index 和位置，但它不起作用。

感谢您的帮助。

【问题讨论】：

请在问题中包含相关代码。

标签： html css responsive-design

【解决方案1】：

这将起作用：

删除这个：

#wrapper {
    z-index:10; // <--- remove this
}

添加这个：

.buttons button {
    z-index: 16; // <---
    position: relative; // <---
}

演示：http://jsfiddle.net/MarkkNijboer/e6ngmgfg/

更新：

我稍微改变了按钮的功能。现在它检查菜单是否打开：

/* push menu left */
togglePushLeft.addEventListener( "click", function(){
    if(classie.has(body, "pml-open")) {
        classie.remove( body, activeNav );
        activeNav = "";
        document.body.removeChild(mask);
    } else {
        classie.add( body, "pml-open" );
        document.body.appendChild(mask);
        activeNav = "pml-open";
    }
} );

演示：http://jsfiddle.net/MarkkNijboer/e6ngmgfg/1/

【讨论】：

它有效，谢谢。问题是当菜单打开并且我点击按钮“M”时它仍然打开，它应该关闭。
谢谢它的工作。但是有什么办法可以离开 z-index:10;在包装上并使按钮出现？谢谢。
@AdrienParad 简短回答：不。包装器包含按钮。通过将 z-index 设置为 10 意味着此包装器中的所有内容都不会具有高于 10 的 z-index（按钮也是如此）。掩码的 z-index 为 15，因此通过将按钮的 z-index 设置为 16 并删除包装器 z-index，您可以获得所需的结果。顺便提一句。我看到你现在有两个面具。我不认为黑屏是你想要的。

【解决方案2】：

试试 SIDR http://www.berriart.com/sidr/ 它是一个能够实现此功能的 jQuery 插件。它也是可定制的。基本用法

<a id="existing-content-menu" href="#existing-content-menu">Existing content</a>
<a id="remote-content-menu" href="#remote-content-menu">Load remotelly</a>
<a id="callback-menu" href="#callback-menu">Callback loaded</a>

<header id="demoheader">
<h1>Demos &amp; Usage</h1>
</header>

<div id="demo-content">
<p>Here are described differents ways of usage for this plugin, you can read and adapt them to your website's requeriments. Below are described all options with details.</p>
</div>

<script>
$(document).ready(function() {
$('#existing-content-menu').sidr({
name: 'sidr-existing-content',
source: '#demoheader, #demo-content'
});
$('#remote-content-menu').sidr({
name: 'sidr-remote-content',
source: 'http://www.example.com/remote-menu.html'
});
$('#callback-menu').sidr({
name: 'sidr-callback',
source: function(name) {
return '<h1>' + name + ' menu</h1><p>Yes! You can use a callback too ;)</p>';
}
});
});
</script>

【讨论】：