1

如何制作像 amazon.com 这样的下拉/滑出式菜单，以便当您将鼠标悬停在“按部门购物”上，然后将鼠标悬停在所有选项上时，另一个菜单会滑出到右侧，根据您的鼠标悬停显示内容？（如果可能，仅使用 CSS3 而不使用 javascript）？

还假设您有多个像亚马逊这样的部门，那么拥有多个 div 是否可行，例如：

<div id="department1" style="display:none">
Content for department1
</div>
<div id="department2" style="display:none">
Content for department2
</div>
...

要在获得下拉菜单后获得该滑出部分，我将 div id 称为“currentdepartment”以更改任何“部门名称”上的鼠标悬停时更改的内容，我通常会这样做：$("#currentdepartment").html($ ("#department1").html())

有没有更好的方法来实现理想的性能？（基于速度和空间[似乎在同一页面上将鼠标悬停在每个部门的内容上有多个 div 似乎可能很浪费]）

4

2 回答 2

1

前段时间有人写了一篇关于亚马逊下拉框的博文：

http://bjk5.com/post/44698559168/break-down-amazons-mega-dropdown

于 2013-07-05T05:26:56.930 回答
1

亚马逊为此构建了自己的 Jquery。当然，他们使用过其他库，如 Jquery 和 Sizzle，但他们不能直接使用脚本，我们也不能打算直接使用这个特定的脚本。

所以你的答案是亚马逊基本上使用 CSS sprites、Jquery 和 Sizzle 来为他们的代码开发他们自己的自定义脚本。我检查了代码，它涉及超过 5500 行，除非您正在构建 Amazon 第 2 部分，否则我认为这对您不可行。

所以我建议寻找更容易构建的下拉菜单，而这的起点是动态驱动器

他们有易于使用的菜单和教程来指导您使用它们。希望回答了你的问题

于 2013-07-05T06:04:40.867 回答