Question

我有这个菜单http://meetsingledating.com/test/。当我点击按钮＆＃34; M＆＃34;时，菜单从左侧推送。

我不想要按钮＆＃34; M＆＃34;当菜单打开时呈灰色调，我想这样：

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

当菜单打开并点击按钮＆＃34; M＆＃34;时，我想菜单以相同的方式关闭它的灰色色调。

我已经在按钮上尝试了更高的z-index和位置，但它无法正常工作。

感谢您的帮助。

Answer 1

尝试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>

`

Answer 2

这将有效：

删除它：

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

添加：

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

DEMO ：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";
    }
} );

DEMO ：http://jsfiddle.net/MarkkNijboer/e6ngmgfg/1/

移动左推菜单

2 个答案: