折疊側邊欄菜單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操作變得非常容易。 基本上，它只是將事件處理程序綁定到您的漢堡包類，然后在每次單擊漢堡包時執行該功能以滑動切換邊欄。