用于创建多级菜单的最快且最轻量级的菜单方法

时间:2011-11-08 23:50:58

标签: jquery css

我想创建一个像this one这样的菜单,性能对我来说非常重要。 到目前为止,我遇到了两种不同的方法,Javascript和CSS,我很难弄清楚应该采用哪种方式。哪一种更快更轻巧的方法?

我的网站使用Javascript,但我很好奇的是,如果我选择CSS方法,我可以以某种方式使其工作,如果用户禁用Javascript,静态页面显示给他/她?

我将用一个例子来解释我的问题。假设我的菜单上有一个DOWNLOAD按钮。如果用户有JS,下载内容应该在jQuery的帮助下显示在同一页面上,但如果用户已禁用JS,则单击菜单项应该将用户带到download.php页面。

顺便说一句,如果您建议使用该方法的免费解决方案,请提供相关链接。谢谢。

5 个答案:

答案 0 :(得分:2)

CSS菜单比JS菜单更难使用:如果鼠标关闭1px甚至1ms长,子菜单将立即隐藏。您可以在JS菜单上添加100或200毫秒的延迟,并允许访问者出现小的移动错误。并非所有人都是具有完美鼠标技能的游戏玩家;)

所谓的“超级下拉”菜单可能比您提供的示例更好。垂直然后水平移动在网络上很难(甚至在桌面上它也只用于软件中很少访问的功能。只有我们的web开发人员和网站设计人员可以轻松地浏览这些复杂的菜单:)); mega下拉列表将显示整个链接,并为访问者提供了很好的标题。

如果您的网站应该易于在智能手机上使用,您可能还需要考虑在点击时显示子菜单的菜单(即在用户点击主链接后)。

编辑: 我应该在没有你询问它们的情况下添加这些链接,但找不到第二个(现在它在我的书签中,谢谢:))

答案 1 :(得分:1)

您可以使用基于css的菜单开始显示,然后使用JS尽快隐藏它。或者您甚至可以用另一种依赖JS的菜单样式替换它。

CSS更快更轻。 JS更灵活。混合动力是最重的。

答案 2 :(得分:1)

了解progressive enhancement的一个很好的理由。同时使用CSS和JS!

你应该为那些不使用javascript然后用JS构建它以获得你想要的东西的极少数人创建一个有效的基本CSS菜单。

它不仅对可访问性有好处,它还可以创建更强大的无错误代码,因为您可以保证恢复功能(大部分时间)

答案 3 :(得分:0)

最好的选择是使用纯css来达到你想要的效果。这样您就不必依赖启用js了。大约有30-50%的用户在没有js的情况下浏览网页,直到他们需要它为止,至少从我的经验和我维护的网站开始。

答案 4 :(得分:0)

默认情况下,您的CSS应隐藏子子菜单,并且每个顶级项目都应链接到允许我访问该菜单中通常存在的项目的页面。

例如,如果您有一个名为Cats的菜单项且子项是各种Cats品种,那么您的顶级页面(/ cats /)也应该有品种链接。

简而言之:理想情况下,顶级菜单应链接到子菜单中的内容索引。这样,点击菜单的人仍然可以访问菜单的内容,无论他们是否有Javascript(或者使用的是菜单之类的奇怪的iPad)