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?