如何在不使用Javascript的情况下在HTML中创建菜单？

StackOverflow https://stackoverflow.com/questions/233251

  •  04-07-2019
  •  | 
  •  

题

多年以来，GUI标准是弹出菜单的应用程序的菜单栏，如果您单击或悬停菜单栏中的条目。有些网站也实现了这个功能，但据他所知，他们使用的是Javascript。由于不同的原因，Javascript可能是一个问题，所以问题是：这是否可以在没有Javascript的情况下实现，只使用HTML和CSS？

有帮助吗？

解决方案

之前我做过类似的事情，这是将菜单项放在锚标签中的一个技巧，隐藏div中的子菜单INSIDE那些锚标签。 CSS技巧是在a：hover事件期间显示内部div。

它看起来像：

<style>
    A DIV { display: none; }
    A:hover DIV { display: block; }
</style>
<a href="blah.htm">
    Top Level Menu Text
    <div><ul>
        <li><a href="sub1.htm">Sub Item 1</a></li>
        <li><a href="sub2.htm">Sub Item 2</a></li>
        <li><a href="sub3.htm">Sub Item 3</a></li>
    </ul></div>
</a>

您的里程可能会有所不同......

编辑：Internet Explorer 6及更低版本不支持除了A以外的其他元素的：hover伪类。在更“现代”的浏览器中，可以使用这个技巧与LI，TD，DIV，SPAN一起使用，以及大多数标签。

其他提示

最着名的技术是 suckerfish菜单。搜索它将导致很多有趣的菜单。它只需要在IE6及更低版本中使用javascript。

以下是suckerfish菜单的儿子列表。

考虑使用CSS方法作为JavaScript不可用时的备份。 JavaScript可以*为下拉菜单提供更好的用户体验，因为如果鼠标暂时离开其悬停区域，您可以添加一些延迟因子以立即停止菜单消失。纯CSS菜单有时候使用起来有点挑剔，特别是如果悬停目标很小的话。

*：当然，并非所有的菜单脚本都真的很难做到这一点......

您可以使用伪类：悬停来获得悬停效果。

a:link {
 color: blue;
}

a:hover {
  color: red;
}

我可以提供一个更广泛的例子但不是现在（需要让孩子去看牙医）。

Eric Meyer 的原创文章 纯CSS菜单 。

其他人现在必须提到更加强大和现代的内容，但我想我会为后人提及它。 ：）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top