I'm having an issue with animating on click using CSS. The animation works fine on the first click, but it doesn't work on the second click. This is because the click event is being overridden by jQuery to enable the dropdown menu to open onClick instead of hover.
Should I be handling the animation in my CSS differently, or should I use jQuery to animate the dropdown instead?
You can see the issue here:
The problem is specifically with the SERVICES tab.
This is the navigation structure:
<nav id="top-menu-nav">
<ul id="top-menu" class="nav">
<li id="menu-item-95" class="mega-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-95"><a href="#">Services</a>
<ul class="sub-menu">
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://elevationspa.wpengine.com/massage/">Massage</a></li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://elevationspa.wpengine.com/nails/">Nails</a></li>
<li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://elevationspa.wpengine.com/hair/">Hair</a></li>
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://elevationspa.wpengine.com/esthetics/">Esthetics</a></li>
<li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://elevationspa.wpengine.com/acupuncture/">Acupuncture</a></li>
</ul>
</li>
</ul>
</nav>
Here's the JavaScript code:
<script type="text/javascript">
(function($) {
function setup_collapsible_submenus() {
var $menu = $('#top-menu'),
top_level_link = '#top-menu .menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ( $(this).is(top_level_link) ) {
$(this).attr('href', '#');
}
if ( ! $(this).siblings('.sub-menu').length ) {
$(this).on('click', function(event) {
$(this).parents('.nav').trigger('click');
});
} else {
$(this).on('click', function(event) {
event.preventDefault();
$(this).parent().toggleClass('visible');
});
}
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus()
}, 1000);
});
})(jQuery);
</script>
And this is the CSS code:
#main-header #top-menu ul.sub-menu {
display: none !important;
visibility: hidden !important;
transition: all 0.7s ease-in-out;
animation: gridFadeIn 0.7s ease-in-out both;
}
#main-header #top-menu .visible ul.sub-menu {
display: block !important;
visibility: visible !important;
transition: all 0.7s ease-in-out;
opacity: 1;
animation: gridFadeIn 0.7s ease-in-out both;
}
@keyframes grideFadeIn {
0% {
opacity: 0;
transform: translateY(-5%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}