0

我正在尝试为我的简单水平一级顶级菜单创建简单的移动版本。我想用最初隐藏但当用户单击屏幕右上角的简单菜单链接时显示的垂直菜单替换水平顶部导航。

事实上，如果您将窗口压缩到小于 768 像素，您可以在http://www.janparker.co.uk上看到我迄今为止构建的内容。

这几乎是一个精美简单的纯 CSS 结果。

菜单完美运行，但是如果用户首先单击“菜单”来激活菜单，然后不使用菜单，而是单击菜单外页面上的其他链接，就会出现问题。

外面的链接不起作用。更糟糕的是，菜单也会关闭并且页面滚动（自然行为和非不良行为），如果用户在页面向下滚动很长一段时间，这种组合会让用户完全迷失方向。

代码是：

<a id="menu-invoker" tabindex="0">Menu</a> <nav><ul><li>First menu item</li><li>second menu item</li></ul></nav> <p><a href="http://www.google.com">Some other link</a></p>

#menu-invoker:focus ~ nav {display: block;} nav {display:none;} ul:focus, ul:active, ul:hover {display: block;}

或看小提琴：http: //jsfiddle.net/YNxVs/1/

有什么解决办法吗？实现这一目标的最简单方法是什么？乔纳森

4

1 回答 1

0

问题是已经#menu-invoker没有了:focus。一种解决方案可能是position: absolute;导航，因此它浮动在其他内容之上。这样滚动高度永远不会改变。

（菜单外的链接在 Firefox 中有效，但在 IE 或 Webkit 中无效。不确定哪个“错误”）

于 2013-02-20T12:53:03.173 回答