html - 折叠边栏菜单 Flex

Question

我正在为我的网站创建管理面板，我得到了侧边栏菜单，我需要将其隐藏到汉堡包图标中，并且只有在我单击它时才折叠它。我一直在寻找解决方案，但没有找到太多。我希望你们能帮助我解决我的问题。我得到了 flex 侧边栏菜单，代码如下:

    .sidebar{
  @include flexbox();
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  flex: 0 0 18%;
  min-height: 100%;
  margin: 0;
  background-color: $oc-gray-9;
  a{
    display: block;
    width: 87.25%;
    text-align: left;
    padding-left: 5vh;
    text-decoration: none;
    color: $oc-gray-6;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 10vh;
    font-family: CaviarDreams;
    font-size: 1.15vw;
  }
  a:hover{
    background-color: $oc-red-9;
    color: $oc-gray-2;
    .menu-img {
    opacity: 1;
  }
  }
  .logo-img{
    width: 90%;
    height: auto;
  }
  .menu-img {
    width: 7%;
    height: auto;
  }

}

HTML 是这样的:

<div class="sidebar">
<img src="logo.png" class="logo-img">
  <a class="hvr-fade" href="index.php"><img src="dash.png" class="menu-img"> Dashboard</a>
    Other code here....
</div>

有什么办法可以做到这一点吗？

谢谢。

Answer 1

使用 jQuery:

$(document).on('click', '.<your hamburger icon class>', function(){
     $('.sidebar').slideToggle();
})

这就是我在大多数侧边栏导航中使用的技巧。

如果您以前没有使用过 Jquery，它会非常简单。但是使 DOM 操作变得非常容易。基本上它只是将一个事件处理程序绑定(bind)到您的汉堡包类，然后在每次单击汉堡包时执行滑动切换侧边栏的功能。