BlackVikingPro BlackVikingPro - 2 months ago 7
jQuery Question

Hamburgers and sidebarEffects Collision

I've tried countless things on this one piece of code that doesn't seem to want to work. I combine the following CSS and JavaScript libraries in my project:

Materialize; Normalize; Icons; Component; Hamburgers CSS; Modernizr (custom); jQuery; Classie.js; sidebarEffects.js; and SweetAlert.

Here is my code snippet I am running into problems with:

<div class="sideMenu">
<button class="hamburger hamburger--collapse" type="button" onclick="this.toggleClass('is-active);"></button>
<div id="st-trigger-effects">
<button data-effect="st-effect-11" class="hamburger">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>


The problem is that whenever you click the button (hamburger icon), the menu shows up, though the icon doesn't transition to the appropriate "is-active" icon and/or class! I actually tested it, and even with the "is-active" class put in place, the icon still doesn't change.

The "sideMenu" class that is active, this is the CSS code to it:

div.sideMenu {
margin-top: 5%;
width: 15%;
height: 10%;
position: fixed;
margin-left: 5%;
}


Please help, and thanks so much in advance!

Answer

You have the following going on:

<button class="hamburger hamburger--collapse" type="button" onclick="this.toggleClass('is-active);"></button>
<div id="st-trigger-effects">
    <button data-effect="st-effect-11" class="hamburger">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
</div>

Which should be:

<div id="st-trigger-effects">
    <button data-effect="st-effect-11" class="hamburger hamburger--collapse" type="button">
         <span class="hamburger-box">
             <span class="hamburger-inner"></span>
         </span>
     </button>
</div>

This will get the hamburger to convert to the is-active state correctly however when you click out of the animated state, it won't reset the hamburger (because you're restoring the non-animated state by clicking anywhere, not the hamburger). You'll need to look at that event and determine the callback function that restores the content out of that animated state, and reset your hamburger icon by removing the is-active class.

Comments