如何制作类似“delicious”和“google”的下拉菜单？

Question

我想做一个下拉菜单，就像在这个页面上的delicious一样：http://delicious.com/search?context=all&p=sql&lc=1。 在此页面上，点击“搜索”按钮旁边的箭头。 点击后，它会显示一个下拉菜单，我想要相同的菜单样式，但在我的页面上，我有一个链接，我希望使用该链接时会显示一个简单的小图标，并且在单击链接或该菜单图像时，将打开下拉菜单。

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

我想尽量少用JavaScript，我更喜欢JQUERY。

- Prashant

---

解决方案必须跨浏览器兼容！ - djmzfKnm

Answer 1

有许多jQuery插件可以创建像delicious一样的下拉列表（菜单）。
你可以使用以下插件：

1. JdMenu
2. 使用jQuery创建下拉菜单
3. 免费CSS下拉菜单框架

- ecleel

Answer 2

我建议使用Son of Suckerfish来创建这样的菜单。它只使用CSS，因此即使对于没有脚本的用户也可以正常工作，并且非常轻量级和快速。

- annakata

---

这些仅使用CSS的效果非常不错！ - mmcdole

iPhone会破坏悬停行为 - 如果您想迎合iPhone用户，这一点值得注意。 - Noel Walters

Answer 3

这是一个关于如何创建类似谷歌顶部导航菜单的教程。

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

- Shreyas

Answer 4

你可能会发现这个jQuery UI插件很有用 - http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/。它是以渐进增强为目标构建的。

- lumonald

Answer 5

最简便的方法是使用 Javascript 设置菜单。有许多可用的 Javascript 库可供选择，以使此过程更加容易。其中一些更受欢迎的库包括：

• Yahoo 用户库
• Dojo
• JQuery

- trilobite

Answer 6

你可以尝试使用一些列表。这是我博客上的一篇旧文章，介绍如何使用列表和一些jQuery代码来制作漂亮的面包屑导航。

- Staicu Ionut