2016-12-15 3 views
0

クリックするとメニューが右から左にスライドしています。メニューを閉じるにはボタンの向きを変更する必要があります

メニューを開くための矢印ボタンがあります。

メニューを閉じるには、そのボタンの方向を変更する必要があります。

私にこれを手伝ってください。

HTML

<!-- Menu --> 
<nav class="menu" id="theMenu"> 
    <div class="menu-wrap"> 
    <h1 class="logo"><a href="index.html">Menu</a></h1> 
    <a href="index.html"><i class="fa fa-home"></i>Home</a> 
     <a href="Mywedding.html"><i class="fa fa-diamond"></i>My Wedding</a> 
     <a href="wedding-venue.html">Venue List</a> 
     <a href="about-us.html">About</a> 
     <a href="#contact">Contact</a> 

    </div> 

    <!-- Menu button --> 
    <div id="menuToggle" class=""><i class="fa fa-angle-left"></i></div> 
</nav> 

はJavaScript

(function() { 
    // Menu settings 
    $('#menuToggle, .menu-close').on('click', function() { 
    $('#menuToggle').toggleClass('active'); 
    $('body').toggleClass('body-push-toleft'); 
    $('#theMenu').toggleClass('menu-open'); 
    }); 
})(jQuery); 
+5

js fiddleを作成してそこにコードを入力してください –

+0

ところで、矢印ボタンはどこですか? –

+0

'これは矢印ボタンです@ArtemDudkin – rajinder

答えて

1

あなたはクリック機能に

$('#menuToggle').find($(".fa")).toggleClass('fa-rotate-180'); 

をあなたの内側にこの行を追加することfontawesomeアイコン回転.fa-rotate-180のクラスを追加することができますも追加することができますCSSアニメーションの回転効果

#menuToggle i{ 
    -moz-transition: all 500ms linear; 
    -webkit-transition: all 500ms linear; 
    transition: all 500ms linear; 
} 
+0

ありがとうございました@davebra – rajinder

関連する問題