Reset toggled classes after window resize

Question

I'm trying to make my mobile menu behave like the one on this site: www.wearenation.co.uk

On the site I've referenced, if you open the mobile menu in a window with width < 1001px, then resize to a larger width, the menu stays closed, even if you resize to < 1001px again. I'm trying to figure out the best way to achieve the same thing.

Right now, clicking my mobile nav 'burger' toggles four separate classes:

//---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');
});

Until now, I simply 'hid' the mobile menu when width > 768px with a CSS media query.

The issue is: the nav is still active, just hidden. This becomes apparent if you resize your window back to <768px. I'm trying to figure out how to make a >768px width resize completely reset the nav, so when you return to a smaller width it isn't active.

This involves attaching different classes (.burger, .cloak-hide, etc.) to an event that fires when window width > 768px. I'm trying to figure out the best way to 're-toggle' the classes without triggering CSS transitions.

To give an example: when the burger is clicked, 'menu-transform-active' is added to an element with class 'menu-transform', going from 'transform: translate3d(100,0,0)' to 'transform: translate3d(0,0,0)'. Upon resizing the window >768px, this value needs to return to default instantly, without triggering 'transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);' added to the 'menu-transform' class.

I've been experimenting with a few different methods for achieving this, but haven't had any luck as of yet.

Here's the mobile-nav 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 -->

...and the relevant 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)
}

Greatful for any feedback, advice, or constructive criticism!

Dan Philip Dan Philip · Accepted Answer · 2017-09-12T01:05:50

You can use jQuery resize event to remove all active classes when screen width goes above 768px.

$(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');
  }
});

Reset toggled classes after window resize

2 Answers