Web版本所需的下拉菜单代码

Question

我有一个网站，在顶部标题区域我有一个下拉列表，仅当用户将鼠标悬停在它上面时才会起作用（http://liquor.com）。但在移动版本中，我被告知这种行为不起作用。

所以我会在代码中添加一个条件语句并显示另一个下拉菜单，但我很好奇应该使用什么代码进行移动下拉列表。

非常感谢任何帮助。

Answer 1

我有纯CSS（根本没有javascript）2级下拉菜单，至少可以在iPod touch，iPhone和iPad上使用。

所需要的只是添加一个虚拟onclick处理程序，所以

<li><div class="menuheader">Reports</div>
... </li>

成了

<li><div class="menuheader" onclick="void(0)">Reports</div>
... </li>

这是在Safari Reference Library的Apple Making Elements Clickable条目中描述的。

Answer 2

你可以试试这个：http://css-tricks.com/unobtrusive-page-changer/

Answer 3

由于移动平台无法：悬停，因此您必须将下拉菜单绑定到单击事件。

基本上按照以下步骤创建一个下拉菜单：

• 捕获顶行导航链接的点击事件（因为用户无法悬停）
• 防止默认（浏览器加载新页面）
• 根据点击的top-nav链接加载适当的子菜单。
• 在失去焦点时删除子菜单（用户点击页面或其他顶部导航链接）