Question

我的菜单点击时从右向左滑动。

有一个箭头按钮可以打开菜单。

要关闭菜单，我需要更改该按钮的方向。

请帮助我。

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);

Answer 1

您可以添加fontawesome图标旋转类.fa-rotate-180在您的点击功能中添加此行

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

您还可以使用css动画添加旋转效果

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

要关闭菜单，我需要更改按钮的方向

1 个答案: