サイドバーのメニューを折り畳む

Question

私は自分のサイトの管理パネルを作成していますが、私はハンバーガーのアイコンに隠す必要があるサイドバーメニューを持っています。私は解決策を探していたが、あまり見つけられなかった。皆さんが私の問題を手伝ってくれることを願っていました。このような

.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> 

私はこれを行うことができますどのように任意のアイデア？

ありがとうございます。 jQueryのを使用して

Answer 1

：

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

これは、それは私が私のサイドバーのNAVのほとんどに使用するものだトリックを行う必要があります。

Jqueryはこれまで使用していなかったのはかなり簡単です。しかし、DOM操作はとても簡単です。基本的には、ハンバーグクラスにイベントハンドラをバインドし、ハンバーガーをクリックするたびにサイドバーを切り替える機能を実行します。