CSS仅下拉菜单真的可行吗？

Question

所以,我决定开始更深入地学习CSS,我开始尝试实现一个纯CSS下拉菜单/选择框.我开始研究一些在线教程中提供的代码.

最终,我想出了这个,我觉得这很不错.但是,我得出的结论是,在所有情况下,CSS菜单可能永远不会成为Javascript菜单的合适替代品,因为当您抛弃Javascript时会出现微妙的问题.

如果下拉菜单中的项目只是<a href链接,那么一切都应该没问题.但是,如果您希望每个链接触发Javascript事件,则会遇到以下问题:

• 当用户单击下拉框中的项目时,您希望下拉框显然消失.如果下拉框中的项目是<a>元素,则会自动执行此操作.如果它们不是<a>元素,则下拉框不会在点击时消失 - 这会留下两个选项:(A)连接一些侦听的Javascript,onclick然后使下拉框消失,或者(B )使用css :active选择器将下拉框的 display属性设置为none.(A)是愚蠢的,因为你基本上回到了Javascript菜单,并且(B)没有用,因为当你点击菜单中的项目时它会阻止Javascript事件被触发.

• 所以,你必须使用<a>标签.这意味着如果要将事件与菜单项选择相关联,则需要onclick在<a>标记中使用内联.这很好,除非你这样做,它会阻止下拉菜单消失(如我的jsfiddle链接所示).所以,实际上,如果用户选择菜单项时想要做的只是通过<a> 链接导航到另一个页面,那么仅CSS下拉菜单似乎是可行的.我找不到任何方法来获取一个Javascript函数来触发没有一些陷阱.

问:那么,我所说的准确吗？或者有没有办法创建一个仅CSS的下拉菜单,当用户点击它时(A)消失,(B)触发Javascript函数？

Answer 1

我真的不跟着你.为什么你"显然"希望下拉消失？

如果你这样做,那么你应该让它消失,我不清楚这是你想要发生的"显而易见"的事情.

菜单不会消失,因为鼠标仍在悬停区域上方,这正是css应该做的事情.如果您想要其他行为,那么您确实需要使用javascript.在大多数情况下,它无关紧要,因为您要么重定向到另一个页面,要么更改当前状态(例如使用弹出对话框或其他内容).

CSS菜单适用于我用过的大部分用途.我很少使用css菜单来做一些既不重定向也不会引起某种激进状态改变的东西,无论如何都会关闭菜单.

所以我想我的答案是,只是因为你有一个特定的用例,使纯css菜单难以使用,并不意味着它们对大多数其他用途没用.

话虽如此,仅仅是因为你使用javascript并不意味着你必须恢复到一个完整的javascript菜单.你可以简单地使用javascript巧妙地改变标准行为,而不需要完整的js菜单的复杂性.

Answer 2

我觉得你有点困惑.您似乎认为存在二进制文件:无论是所有CSS还是所有JS.这是一种愚蠢的思考方式.当有意义使用CSS并使用JS来做那些不是CSS的东西时,你应该使用CSS.在大多数情况下,使用CSS为您完成繁重的工作(隐藏/显示菜单等),然后使用CSS无法提供的附加功能增强所述菜单,这是大多数专业前端开发人员构建菜单的方式.