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>

我想要做的就是在回家或在主要的南方上翻身时出现sub_home或sub_about。

子导航总是位于左侧的导入，在jquery插件上，它往往会在按钮下方下拉，所以不会很难留下。

可以推荐一个插件，以便轻松实现这一目标。

Answer 1

您可以浏览this link各种菜单插件。

Answer 2

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

您可以在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;
}

Javascript / jQuery子菜单（固定位置）

2 个答案: