寻找下拉扩展菜单插件

Question

我无法找到一个类似用户的脚本： http://www.avast.com/en-us/index 当您将鼠标悬停在任何菜单项（Home，Store ...）上时，显示的菜单会将内容向下移动。

是否有任何常见的jquery插件可以做到这一点？或者可能是现成的wordpress插件？

Answer 1

设置相当容易......他是一个非常基本的例子，说明这可能有用。

这里可以找到DEMO ...它很简单，菜单没有格式化等等......但是得到了重点。当然，在您的实现中，内容区域本身就是菜单......所以只需确保将菜单放在内容中，而不是我正在使用的占位符。

这里的代码是什么，对于每个菜单项，我有一个内容的DIV。这些都被CSS隐藏了。然后，当其中一个菜单项悬停时，使用jQuery我会显示相应的DIV部分。

示例HTML

<ul>
    <li id="home">Home</li>
    <li id="products">Products</li>
    <li id="services">Services</li>
</ul>

<div id="homeContent">
    Our Home Menu Items Go Here
</div>

<div id="productsContent">
    Our Product Content Goes Here
</div>

<div id="servicesContent">
    Our Services Content Goes Here
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>

使用JQUERY的基本处理程序代码

$( "#home" ).hover(
  function() {
    $("#homeContent").show(1000);
  }, function() {
    $("#homeContent").hide(1000);
  }
);

$( "#products" ).hover(
  function() {
    $("#productsContent").show(1000);
  }, function() {
    $("#productsContent").hide(1000);
  }
);

$( "#services" ).hover(
  function() {
    $("#servicesContent").show(1000);
  }, function() {
    $("#servicesContent").hide(1000);
  }
);