實現一個右手大小的CSS彈出菜單

-1

我很努力實現一個CSS彈出菜單。我希望菜單隱藏在頁面後面，並在按鈕點擊（Facebook風格）時顯示。實現一個右手大小的CSS彈出菜單

我已經成功地使其工作在導航菜單與頁面一起滑動： http://jsfiddle.net/fallenartist/N5vZ5/

但我無法弄清楚如何使導航菜單是到位固定。顯然，如果我改變其定位fixed，並把它與較低的z-index導航菜單鏈接不再起作用： http://jsfiddle.net/fallenartist/N5vZ5/1/

任何想法，我怎樣才能使鏈接在後面的示例工作？

2014-04-01 ALx

凡此菜單應該是** **固定？ –

導航菜單應固定到位=不移動。所以當頁面向左滑動以顯示導航菜單時，導航是**不**隨着它移動（我的第一個小提琴），但固定在位置（我的第二個小提琴）。希望這是有道理的。 – ALx

導航不可點擊的原因是因爲它的負Z-index將其置於頁面主體之下。你會在邏輯上希望的話，這樣的事情應該工作：

.page {z-index: 1;} 
nav {z-index: 0;}

然而，由於nav是.page一個孩子，它繼承了父母的指數，無法再定位「下」了。（Read more about that here）

，最好的辦法來解決，這是採取nav出含有元素完全和應用這些索引值，從它的誰去其z-index與之比較的任何元素分離它的那些。

2014-04-01 16:16:42 John

感謝您的答案，但不是你的例子完全像我的第一個？我嘗試使導航菜單**不是滑動但固定到位。 – ALx

哇，對不起。我想我完全掩飾了這一點，現在感覺有點愚蠢！我將在修復的一個工作示例中進行編輯，但不幸的是，它需要對代碼進行輕微的修改。 – John

回答