Question

我刚刚找到了这个很酷的水平下拉菜单：

http://css-tricks.com/examples/DiggHeader/#

我很乐意使用它，但我需要多级。但不知道如何做到这一点。我搜索了有关如何创建多级菜单的教程，但只能找到下载和演示预览。：-S

任何人都可以就如何制作多级菜单提出任何建议吗？

谢谢

Answer 1

你可以查看我为jQuery制作的minimalistic navigation plugin。您可以通过更改css以使用ul列表的相对和绝对定位来使其像该链接一样工作。

Answer 2

我喜欢CSS-Tricks，这可以通过几种方式完成。这是一个简单的例子，我建议你这样做。

HTML MarkUp;

<div id="nav">
  <ul>
    <li>
      <a href="...">Technology</a>
      <ul>
        <li><a href="...">Apple</a>
          <ul>
            <li><a href="...">iPhone</a></li>
          </ul>
        </li>
        <li><a href="...">Design</a></li>
      </ul>
    </li>
  </ul>
</div>

请注意<ul>旁边的<a href="...">Apple</a>。

CSS Only方法;

<style>
  #nav ul li ul{
    display:none;
  }
  #nav ul li:hover>ul{
    display:block;
  }
</style>

此CSS将隐藏在用户将鼠标悬停在元素上之前不需要显示的元素。然后将在悬停时显示。

如果您希望更改效果，可以在JavaScript中完成此元素悬停。

jQuery方法;

<style>
  #nav ul li ul{
    display:none;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
  $("#nav ul li").each(function(){
    $(this).mouseenter(function(){
      $(this).find("ul:first").show();
    }).mouseleave(function(){
      $(this).find("ul:first").hide();
    });
  })
</script>

如何将此菜单变为多级菜单？

2 个答案: