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操作变得非常容易。基本上它只是将事件处理程序绑定到您的汉堡包类，然后执行该功能以在每次单击汉堡包时滑动切换侧边栏。

折叠侧边栏菜单Flex

1 个答案: