Question

我试图使我的移动菜单的行为与此网站上的相似： www.wearenation.co.uk

在我引用的网站上，如果您在宽度<＆lt;的窗口中打开移动菜单1001px，然后调整到更大的宽度，菜单保持关闭，即使你调整大小到＆lt;再次1001px。我试图找出实现同样目标的最佳方法。

现在，点击我的移动导航＆＃39;汉堡＆＃39;切换四个单独的类：

//---HTML---//

<button class="burger navbar-toggler navbar-toggler-right" 
type="button" id="button">
  <span class="sr-only">Toggle Navigation</span>
  <div class="topping"></div><!-- Need 'topping' css -->
</button>

//---jQuery---//

//Toggles 'burger' animation
$('.burger').click(function(){
 $(this).toggleClass('active');
});

//Toggles white-bg to cover content when menu slides out
$("#button").click(function() {
 $('.cloak-hide').toggleClass('cloak-hide-active');
});

//Toggles menu transform 
$("#button").click(function() {
 $('.menu-transform').toggleClass('menu-transform-active');
});

//Fades in Text on Mobile Nav
$("#button").click(function() {
 $('.mobile-nav-transition').toggleClass('mobile-nav-transition-
active');
});

到现在为止，我只是隐藏了＃39;当宽度>时的移动菜单;带有CSS媒体查询的768px。

问题是：导航仍处于活动状态，只是隐藏。如果您将窗口重新调整调整为＆lt; 768px，这一点就变得很明显了。 我试图找出如何使＆gt; 768px宽度调整大小以完全重置导航，因此当您返回较小的宽度时，它不会被激活。

这涉及将不同的类（.burger，.cloak-hide等）附加到窗口宽度＆gt;时触发的事件。 768px。我试图找出最佳方法来重新切换＆＃39;类没有触发CSS转换。

举例：点击汉堡时，＆＃39;菜单转换有效＆＃39;添加到具有类＆＃39; menu-transform＆＃39;的元素中，来自＆＃39; transform：translate3d（100,0,0）＆＃39;转换：translate3d（0,0,0）＆＃39;。在调整窗口大小＆gt; 768px后，此值需要立即返回默认，而不会触发＆＃39;过渡：所有.5s cubic-bezier（0.17,0.04,0.03,0.94）;＆＃ 39;添加到菜单转换＆＃39;类。

我已经尝试了几种不同的方法来实现这一目标，但是到目前为止还没有运气。

这是移动导航HTML

<div class="mobile-menu menu-transform d-flex flex-column">
<div class="logo-top-margin"><a href="index.html" class="no-click logo 
white-text">Company</a></div>

<ul class="subtitle mb-auto mt-auto textdiv">

    <li class="menu-list-element">
      <a href="index.html">
        <div class="resp-font-menu mobile-nav-transition white-text">
          Home
        <span class="underline menu-underline white-text">
        </div>
      </a>
    </li><!-- menu-list-element -->

    <li class="menu-list-element">
      <a href="work.html">
        <div class="resp-font-menu mobile-nav-transition white-text">
          Work
        <span class="underline menu-underline white-text">
        </div>
      </a>
    </li><!-- menu-list-element -->

    <li class="menu-list-element">
      <a href="about.html">
        <div class="resp-font-menu mobile-nav-transition white-text">
          About
        <span class="underline menu-underline white-text">
        </div>
      </a>
    </li><!-- menu-list-element -->

    <li class="menu-list-element">
      <a href="contact.html">
        <div class="resp-font-menu mobile-nav-transition white-text">
          Contact
        <span class="underline menu-underline white-text">
        </div>
      </a>
    </li><!-- menu-list-element -->

  </ul><!-- subtitle -->

<ul class="menu-footer-content mobile-nav-transition subtitle textdiv">
<li class="mb-2 d-flex">
  <a class="d-flex" href="#">
    <span class="white-text ml-2 align-items-
center">#</span></a>
</li>
<li class="mb-1">
  <ul class="social subtitle p-0 d-flex align-items-center">
    <li class="mr-3">
      <a class="d-flex">
      </a>
    </li>
    <li class="mr-3">
      <a class="d-flex">

      </a>
    </li>
    <li class="mr-3">
      <a class="d-flex">

      </a>
    </li>
  </ul><!-- social -->
</li><!-- mb-1 -->
<li>
  <a href="#" target="_blank">
    <span class="white-text">SoandsoCo.</span>
  </a>
</li>
</ul><!-- menu-footer-content -->
</div><!-- mobile-menu -->

...和相关的CSS

//Hide page content when mobile nav is active

.cloak{
    opacity: 1;
}
.cloak-hide{
    -webkit-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    -moz-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    -o-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    -ms-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
.cloak-hide-active{
    opacity: 0;
}

//Reveal Mobile Nav Text

.mobile-nav-transition{
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
    transition: all .2s linear;
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    -ms-transition-delay: .3s;
    transition-delay: .3s;
    opacity: 0;
}
.mobile-nav-transition-active{
    opacity: 1;
}

//Apply x-axis transform

.menu-transform {
  -webkit-transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -moz-transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -o-transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -ms-transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);
  transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
.menu-transform-active {
  transform: translate3d(0,0,0)
}

非常感谢任何反馈，建议或建设性的批评！

Answer 1

当屏幕宽度超过768px时，您可以使用jQuery resize事件删除所有活动类。

$(window).resize(function() {
  var sWidth = $( window ).width();
  if(sWidth > 768) {
    $('.burger').removeClass('active');
    $('.cloak-hide').removeClass('cloak-hide-active');
    $('.menu-transform').removeClass('menu-transform-active');
    $('.mobile-nav-transition').removeClass('mobile-nav-transition-active');
  }
});

Answer 2

如果您将过渡设置为自己的类，则可以切换动画运行的能力。这样您就可以立即停用菜单＆＃39;没有过渡。

因此，不仅仅是切换不透明度状态，首先切换过渡状态，然后设置不透明度。如果转换类在那里它会动画，如果它不是它没有。我说你所拥有的很近。

正如@Dan Philip所说; $(window).resize()是您检测调整大小事件的方法。

窗口调整大小后重置切换类

2 个答案: