手機左推菜單

Question

我有這個菜單http://meetsingledating.com/test/。當我點擊按鈕「M」時，菜單從左邊推。

我不想按鍵「M」是灰色的色調，當菜單打開時，我想它是這樣的：

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

而當菜單是開放的，我點擊按鈕「M」，我想菜單關閉時灰色的色調相同的方式。

我已經嘗試了更高的z-index和按鈕的位置，但它不起作用。

感謝您的幫助。

Answer 1

這將工作：

刪除此：

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

補充一點：

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

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

---

UPDATE：

我改變了功能按鈕了一下。現在檢查菜單是否打開與否：

/* 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/

Answer 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> 
 

`