如何制作像“美味”和“谷歌”这样的下拉菜单？答案

【问题标题】：How to make dropdown menu like "delicious" and "google"?如何制作像“美味”和“谷歌”这样的下拉菜单？
【发布时间】：2010-10-03 17:01:20
【问题描述】：

我想在这个http://delicious.com/search?context=all&p=sql&lc=1 页面上制作一个像delicious 一样的下拉菜单。在此页面中，单击带有“搜索”按钮的箭头。单击它会显示一个下拉菜单，我想要相同的菜单样式，但是在我的页面上我有一个链接，我想要该链接的内容将显示一个简单的小图标，然后单击该链接或该菜单图像，下拉菜单将打开。

Google 也做了同样的事情，http://www.google.co.in/firefox?client=firefox-a&rls=org.mozilla:en-US:official 点击显示的顶部菜单中的“更多”链接。

我想使用最少的 javascript，我更喜欢 JQUERY。

【问题讨论】：

解决方案必须跨浏览器！

标签： jquery css menu drop-down-menu

【解决方案1】：

有很多 JQuery 插件可以创建一个下拉列表（菜单），比如delicious。
你可以使用：

【讨论】：

【解决方案2】：

对于这样的菜单，我总是推荐Son of Suckerfish。仅限 CSS，因此它甚至适用于没有脚本的用户，并且非常轻巧且快速。

【讨论】：

这些对于 CSS 来说非常好！
iPhone 打破了悬停行为 - 如果您想适应 iPhone 用户，请记住这一点。

【解决方案3】：

这里有一个关于创建谷歌顶部导航菜单的教程

http://blog.geotitles.com/2011/09/creating-the-new-top-black-bar-found-in-google-and-all-its-products/

【讨论】：

【解决方案4】：

您可能会发现这个 jQuery UI 插件很有用 - http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

它在构建时考虑了渐进增强。

【讨论】：

【解决方案5】：

最简单的方法是在 Javascript 中设置菜单。有许多可用的 Javascript 库可以使这更容易。一些比较流行的包括：

【讨论】：

【解决方案6】：

您可以通过一些列表try to play。这是我博客上的一篇较早的帖子，内容是关于如何使用列表和一些 jquery 制作漂亮的面包屑。

【讨论】：