javascript - 侧面导航栏下拉菜单

Question

我想知道是否可以在导航栏上制作一个下拉部分，例如:单击其中一个选项，例如“产品”，然后会出现一个包含产品列表的下拉列表，当您再次点击列表消失。这是否可以使用 HTML/CSS/JS，如果可以，怎么做？

我目前正在使用 ul 和 li 标签在我的网站上制作导航栏，我不确定是否有其他方法可以做到这一点.

任何帮助都会很棒!

Answer 1

创建下拉菜单的方法有很多种。我想使用一种近乎纯 CSS/HTML 的方法来应对您的挑战。

考虑尝试这样的事情:

/*  CSS  */
ul.navigation > li{
  display:inline-block;
  position:relative;
  list-style:none;
  margin:0px;
}

ul.navigation > li > ul{
  position:absolute;
  background:lightgray;
  display:none;
  left:0px;
  top:20px;
}

ul.navigation > li > a:focus + ul{
  display:block;
}

<!-- HTML -->
<ul class="navigation">
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li>
    <a href="javascript:void(0)">Products</a>
    <ul>
      <li>Bottles</li>
      <li>Cans</li>
      <li>Cups</li>
    </ul>
  </li>
</ul>

首先，我们确保要用作切换而非链接的导航链接具有 href="javascript:void(0)"。这将阻止 a 元素的默认行为离开页面。

接下来我们需要通过向嵌套的 ul 添加 display:none 来隐藏子菜单。

然后为了显示我们的子菜单，我们要求用户关注给定导航的 anchor 标记，该标记将子菜单的显示属性设置为 block 。

例子: http://codepen.io/eoghanTadhg/pen/ZWxXEb