0

I have a script that collapses my site navigation on small screens, based on Brad Front's example here: http://codepen.io/bradfrost/full/sHvaz

All the script does is toggle a class on click, and then the CSS uses a transition on the max-height to hide & reveal the menu.

On one of my sites, the script runs just fine, but on others there is a pronounced delay after the "hide menu" click before the CSS transition begins.

The script that functions as intended is here: http://archstglassinc.com/ (the script comes into play when the browser window is narrower than 768px).

Here's the un-minified script:

var $menu = jQuery('#menu-main-nav'),
$menulink = jQuery('.menu-link');

$menulink.click(function() {
  $menulink.toggleClass('active');
  $menu.toggleClass('active');
  return false;
});

Whereas the script that lags is here: https://www.talleyreedinsurance.com/ (Please Note: in order to access the collapsed menu on this site, you need to load or re-load the page when your browser window is narrower than 768px). The first click reveals the menu just fine, but there's a delay after the second click before the menu starts to go away.

This script, un-minified, is a bit longer because it enables some drop-downs that will come in a future phase, but the relevant portion is identical except that it uses preventDefault instead of return false to stop the link:

var $menu = $('#menu-partial-nav-for-launch'),
  $menulink = $('.menu-link'),
  $menuTrigger = $('.family-link > a, .business-link > a');

$menulink.click(function(e) {
  e.preventDefault();
  $menulink.toggleClass('active');
  $menu.toggleClass('active');
});

$menuTrigger.click(function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.toggleClass('active').next('ul').toggleClass('active');
});

It's probably irrelevant to give you this code, though. I can tell that the class toggle does happen immediately, because the icon next to the "Site Menu" link text switches right away, and that relies on the toggled class.

But then there's a delay of half a second or more before the max-height transition begins.

Can anyone determine (or even speculate upon) what would cause this sort of pause in the transition?

1 Answer 1

1

The issue isn't with your javascript but your css. You set your active max-height to 100em.

However, you don't need this entire height.

The browser is transitioning the entire max-height from 100 back to 0. The first 89ems of the transition doesn't appear do anything, because the content is only roughly 11em tall. In your other example, you set max-height to 15em

Sign up to request clarification or add additional context in comments.

1 Comment

GEEEEZ, that makes so much sense! Thank you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.