使用jQuery制作大型下拉菜单

本文写于2009年，至今仍是我们最受欢迎的帖子之一。 如果您想了解有关jQuery的更多信息，可以在jQuery插件注册表上找到这篇最近的文章 ，非常感兴趣。

超级下拉菜单无处不在，现在， 可用性专家Jakob Nielsen认为它们是相当不错的 ，您可以期望很快看到更多这样的菜单 。

这是他对这种趋势必须说的：

鉴于常规的下拉菜单充斥着可用性问题，因此我建议很多新的下拉菜单。 但是，正如我们的测试视频所示，大型下拉菜单克服了常规下拉菜单的弊端。 因此，我可以推荐一个，同时警告另一个。

当然，尼尔森（Nielsen）的文章就实现这些最有用的方法提供了一些可靠的建议。 简而言之，这是他的建议：

• 最好的大型下拉菜单包含简单，合乎逻辑的信息组，因此易于扫描和导航。
• 保持简单-避免使用复杂的GUI项或其他复杂的交互元素。
• 仅当用户将鼠标悬停0.5秒后，才会出现一个大型下拉菜单。 如果菜单设置为立即显示，并且用户随便将鼠标移到菜单上，他们将看到一堆菜单闪烁着，这很麻烦。
• 如果用户将鼠标从菜单项或mega下拉菜单中移开，则该下拉菜单应保留0.5秒，以防万一用户意外将鼠标从包装箱中滚出。

那么我们将如何实施这些呢？ 虽然最好用纯HTML和CSS来完成所有这些工作，但目前尚无法获得半秒的延迟—当然，Internet Explorer 6还是有一个令人讨厌的问题，它仅支持:hover on anchor元素。 相反，我使用jQuery和一个非常漂亮的插件hoverIntent提出了一个解决方案。

该设计

假设我们有一个客户Mega Shop。 他们的设计师向我们发送了包含一些大型下拉菜单的样机。 您可以在下面看到该模型的相关部分（ 在此处查看完整版本 ）。

标记

第一：标记。 我从基于无序列表的相当简单的菜单开始。 标记如下所示：

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Stuff for him</a></li>
  <li><a href="#">Stuff for her</a></li>
  <li><a href="#">Stuff for kids</a></li>
  <li><a href="#">Stuff for pets</a></li>
</ul>

我将在每个下拉链接之后添加一个div这些将包含菜单的内容。 另外，我希望有一种方法可以指示这些项目上有一个下拉选项，因此我还将在这些列表项目中添加一个类.mega 。 最后，我想确保在没有样式的情况下查看此菜单是有意义的，并且由于每个类别都将作为一种标题，因此我将在项目上添加一些标题标记。 这是一个列表项：

<li class="mega">
  <h2>
    <a href="#">Stuff for him</a>
  </h2>
  <div>
      <!-- Contents here -->
  </div>
</li>

接下来，让我们向这些div添加一些内容。 这是一个：

<li class="mega">
  <h2>
    <a href="#">Stuff for him</a>
  </h2>
  <div>
      <h3>
        Menswear
      </h3>
      <p>
        <a href="#">Shirts</a>, 
        <a href="#">T-shirts</a>, 
        <a href="#">Accessories</a>,
        <a href="#">More...</a>
      </p>
      <h3>
        Gifts
      </h3>
      <p>
        <a href="#">Sporting goods</a>, 
        <a href="#">Gadgets</a>, 
        <a href="#">More...</a>
      </p>
      <h3>
        Clearance!
      </h3>
      <p>
        40% off all photo accessories 
        this weekend only. 
        <a href="#">Don't miss out!</a>
      </p>
    <a href="#" class="more">
      More stuff for him...</a>
  </div>
</li>

当然，我需要添加标记来表示网站的标题。 不幸的是，我们没有时间进行详细讨论，但是您可以在第一个示例unstyled.html中看到我所做的事情。

样式

接下来，我将介绍一些样式。 现在，我们将只专注于样式列表元素和下拉列表的最相关部分。 但是，如果您想查看整个样式表，可以在第二个示例styles.css中完整查看。

每个大型列表项都设置为内联显示，以实现漂亮的水平条。 我们希望下拉菜单可以将页面覆盖在列表项的正下方； 为此，我们将在每个大型列表项上使用position: relative ，然后在div上使用position: absolute ：

ul#menu li {
  display: inline;
  position: relative;
}

每个div的样式都类似于我们从设计师那里收到的模型。 我使用了position: absolute ，将它们与每个列表项向左对齐，并将它们放在下面。 我还使用了display: none作为该菜单后代的所有div的包罗万象，这将有助于隐藏位于首页链接下方的div ：

ul#menu div {
  display: none;
}

ul#menu li.mega div {
  width: 18em;
  position: absolute;
  top: 1.6em;
  left: 0em;
}

我将为这些列表项添加另一个类.hovering ，并使用display: block使其子div元素可见。 稍后，使用JavaScript，当鼠标悬停在列表项上时，我将.hovering class添加到列表项中，而当鼠标离开该区域时，将其删除：

ul#menu li.hovering div {
  display: block;
}

脚本

现在，让我们添加JavaScript。 在这个示例中，我选择使用jQuery。 当然，欢迎您编写自己的脚本或使用其他框架。 您可能会认为，将一个巨大的库的所有开销用于一个小菜单是有点矫kill过正。 但是，这只是我们假设的电子商务网站的一部分，而且我几乎可以肯定也计划将jQuery用于界面的其他部分。

首先，当然，我将包括jQuery库。 接下来，我还将包括一个非常漂亮的插件，名为hoverIntent 。 jQuery有其自己的悬停事件，但是一旦鼠标触摸目标区域，它就会触发。 相反，我们要实现Jakob Nielsen建议的延迟效果：也就是说，我们要等待用户停止移动鼠标。 hoverIntent插件通过考虑鼠标的移动速度来提供此功能。

首先，我们需要编写几个函数来添加和删除.hovering类，该类是打开mega项目显示的类：

function addMega(){
  $(this).addClass("hovering");
  }

function removeMega(){
  $(this).removeClass("hovering");
  }

然后，当我们将鼠标悬停在某个项目上或将其保留时，我们将使用hoverIntent函数来触发这些函数。 首先，我们需要设置一些配置变量：

var megaConfig = {    
     interval: 500,
     sensitivity: 4,

interval参数指定毫秒数（即千分之一秒），hoverIntent用于检查鼠标的移动。 灵敏度参数指定在间隔参数期间鼠标应移动的像素数，以便被视为正在移动。 如果鼠标移动的幅度小于该范围，则认为鼠标正在悬停。

     over: addMega,

over参数指定鼠标停止时将调用的函数。

     timeout: 500,
     out: removeMega
     };

timeout参数指定在执行鼠标移出功能之前我们要等待的毫秒数。 out参数指定了延迟时间过后的处理方法-因此在此示例中，将在500毫秒后调用hideMega函数。

最后，我们将hoverIntent函数附加到.mega列表项，告诉它使用我们设置的配置开始寻找悬停和鼠标.mega ：

$("li.mega").hoverIntent(megaConfig)

就是这样！

测试时间

是时候测试一下我们的菜单了！ 您可以在最后一个示例completed.html中看到带有标记，样式和脚本的完整演示。

现在怎么办？

您可以在此处添加更多内容，例如，下拉菜单可能会遇到一些重大的可访问性问题，因此，最好找到一种向此菜单添加键盘操作的方法。 向这些菜单中添加一些更有趣的设计元素，例如图标，阴影或列排列，也很不错。 不过，到目前为止，我们已经有了一个良好的开端！

如果您喜欢阅读这篇文章，您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如jQuery Fundamentals 。

本文的评论已关闭。 对jQuery有疑问吗？ 为什么不在我们的论坛上提问呢？

From: https://www.sitepoint.com/make-a-mega-drop-down-menu-with-jquery/