侧导航栏下拉菜单

Side nav-bar dropdown

本文关键字：下拉菜单 导航      更新时间：2024-07-03

我想知道是否可以在导航栏上创建一个下拉部分，例如：单击其中一个选项，如"products"，然后有一个包含产品列表的下拉列表，当您再次单击时，列表就会消失。使用HTML/CSS/JS可以做到这一点吗？如果可以，如何做到？

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

任何帮助都会很棒！

有很多方法可以创建下拉菜单。我想用一个几乎纯的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来隐藏子菜单。

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

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

相关文章：