实现右手大小的CSS弹出导航菜单

Question

我正在努力实施CSS弹出导航菜单。我希望菜单隐藏在页面后面，并在按钮点击（Facebook风格）上显示。

我设法让导航菜单与页面一起滑动： http://jsfiddle.net/fallenartist/N5vZ5/

但我无法弄清楚如何使导航菜单修复到位。显然，如果我将其定位更改为fixed并将其置于z-index下方，则导航菜单链接将不再起作用： http://jsfiddle.net/fallenartist/N5vZ5/1/

任何想法如何使链接在后一个示例中起作用？

Answer 1

导航无法点击的原因是因为其负z-index将其置于页面正文下方。你在逻辑上期望，这样的事情应该有效：

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

但是，因为nav是.page的孩子，所以它会继承父母的索引，永远不会定位在＆＃39;之下。它。 （Read more about that here）

解决此问题的最佳方法是将nav从包含元素的元素中取出并应用这些索引值，将其与要与其z-index进行比较的任何元素分开用。

而不是修改所有代码，I've put together a similar example here.