Javascript/jQuery 子菜单(固定位置)

Question

我一直在寻找 jQuery 插件，但找不到任何完全符合我要求的插件。

导航分为两部分，主导航:

<div id="nav">
<a href="" ><img src="/shell/img/nav/home_nm.gif" /></a><a href="" ><img src="/shell/img/nav/about_nm.gif" /></a><img src="/shell/img/nav/apply_nm.gif" /><img src="/shell/img/nav/contact_nm.gif" /><img src="/shell/img/nav/information_nm.gif" /><img src="/shell/img/nav/working_nm.gif" /><img src="/shell/img/nav/moveable_nm.gif" />
</div>

然后是子导航:

<div id="sub_nav" >
<ul id="sub_home"><li><a href="">Courses on Offer</a></li><li><a href="">Work Placements</a></li><li><a href="">Blog</a></li></ul>
<ul id="sub_about"><li><a href="">Funding and  Donations</a></li><li><a href="">Testimonials</a></li><li><a href="">Staff and Board</a></li></ul>
</div>

我想做的就是在主 nan 上的 home 或 about 滚动时显示 sub_home 或 sub_about。

重要的是，子导航始终位于左侧，在 jquery 插件上，它往往会在按钮下方形成一个下拉菜单，因此不会很难向左。

是否可以推荐一个插件来轻松实现这一目标，因为某些东西必须存在。

Answer 1

不要使用插件!这非常非常容易!

您可以在 this jsfillde 中看到以下代码片段的运行情况.

也许它会帮助您将 html 重新排列为更语义化的结构，如下所示:

<nav>
  <ul>
    <li>
      <a href=#>Menu 1</a>
      <ul>
        <li><a href=#>Submenu 1.1</a></li>
        <li><a href=#>Submenu 1.2</a></li>
        <li><a href=#>Submenu 1.3</a></li>
      </ul>
    </li>

    <li>
      <a href=#>Menu 2</a>
      <ul>
        <li><a href=#>Submenu 2.1</a></li>
        <li><a href=#>Submenu 2.2</a></li>
        <li><a href=#>Submenu 2.3</a></li>
      </ul>
    </li>

    <li>
      <a href=#>Menu 3</a>
      <ul>
        <li><a href=#>Submenu 3.1</a></li>
        <li><a href=#>Submenu 3.2</a></li>
        <li><a href=#>Submenu 3.3</a></li>
      </ul>
    </li>
  </ul>
</nav>

最初使用 CSS 隐藏您的子菜单，如下所示:

nav > ul > li > ul {
  display: none;
}

nav > ul > li:hover > ul {
  display: block;
}