Question

我想知道是否可以在导航栏上创建一个下拉部分，例如：点击其中一个选项，例如“产品”，并打下一个包含产品列表的下拉菜单再次单击列表消失。这是否可以使用HTML / CSS / JS，如果是这样，怎么做？

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

任何帮助都会很棒！

Answer 1

有很多方法可以创建下拉菜单。我希望使用几乎纯粹的CSS / HTML方法来应对挑战。

考虑尝试这样的事情：

＆＃13;

/*  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;
}

＆＃13;

<!-- 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>

＆＃13;

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

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

然后要显示我们的子菜单，我们要求用户专注于给定导航的锚标记，该标记将子菜单的显示属性设置为阻止。

实施例： http://codepen.io/eoghanTadhg/pen/ZWxXEb

侧面导航栏下拉列表

1 个答案: