侧面导航栏下拉菜单

debugcn 发表于 Dev

ItzJavaCraft

我想知道是否可以在导航栏上创建一个下拉部分，例如：单击选项之一（例如“产品”），并在下拉菜单中列出产品列表，然后再次单击列表消失了。是否可以使用HTML / CSS / JS，如果可以，如何？

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

任何帮助将是巨大的！

EoghanTadhg

有许多创建下拉菜单的方法。我想使用一种几乎纯的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元素的默认行为离开页面。

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

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

示例：http：//codepen.io/eoghanTadhg/pen/ZWxXEb

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。