实现右手尺寸的 CSS 弹出式导航菜单

【问题标题】：Implementing a right-hand-size CSS flyout nav menu实现右手尺寸的 CSS 弹出式导航菜单
【发布时间】：2014-04-01 16:07:38
【问题描述】：

我正在努力实现 CSS 弹出式导航菜单。我希望菜单隐藏在页面后面并在按钮单击时显示（Facebook 样式）。

我已经设法让它在导航菜单与页面一起滑动的地方工作： http://jsfiddle.net/fallenartist/N5vZ5/

但我不知道如何使导航菜单固定到位。显然，如果我将其定位更改为 fixed 并使用 z-index 将其降低，导航菜单链接将不再起作用： http://jsfiddle.net/fallenartist/N5vZ5/1/

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

【问题讨论】：

这个菜单应该在哪里固定？
导航菜单应固定到位 = 不动。因此，当页面向左滑动以显示导航菜单时，导航不随之移动（我的第一个小提琴），而是固定在位置上（我的第二个小提琴）。希望这是有道理的。

标签： html css

【解决方案1】：

导航不可点击的原因是它的负 z-index 将其置于页面正文下方。你会在逻辑上期望这样的事情应该起作用：

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

但是，因为nav 是.page 的子级，它继承了父级的索引并且永远不能定位在它的“下方”。 (Read more about that here)

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

【讨论】：