CODEWITHSUNDEEP
javascriptjquerymenujquery-animatetransition
EasterMedia
EasterMedia

Reputation: 63

JS/CSS - animating mobile menu toggle

Struggling with this guys, any help would be greatly appreciated!

Attempting to animate in/out transitions of _S theme's mobile menu.

Can't really make a JSFiddle as content is generated dynamically using vanilla JS.

This appears to be the core JS for toggling the mobile class '.toggled' on click of the mobile menu icon: 

button.onclick = function() {
    if ( -1 !== container.className.indexOf( 'toggled' ) ) {
        container.className = container.className.replace( ' toggled', '' );
        button.setAttribute( 'aria-expanded', 'false' );
        menu.setAttribute( 'aria-expanded', 'false' );

    } else {
        container.className += ' toggled';
        button.setAttribute( 'aria-expanded', 'true' );
        menu.setAttribute( 'aria-expanded', 'true' );
    }
};

The only way i've managed to animate so far is with css keyframes on the .main-navigation.toggled class which obviously only animates on the way in, the class is removed on 2nd click and reverts to simply .main-navigation which is hidden at this screensize.

Ideally would like to animate via JS/JQUERY using something akin to .slideToggle or .fadeToggle but as I said struggling to make this work.

Should be useful for other coders working with the _S theme as this is attempting to customise the .main-navigation.js in the latest version.

Many Thanks in advance!

Upvotes: 0

Views: 1341

Answers (1)

Nicole
Nicole

Reputation: 11

I was faced with the same issue and it drove me nuts for three days. I ended up getting the menu 'animated' using CSS3 Transition.

I didn't change anything in the navigation.js file (tried many different things there and nothing worked, just broke things).

I changed two things in the style.css and added transitions:

.main-navigation ul {
    display: block;
    list-style: none;
    position: absolute;
    left: -250px;
    transition: left 1s ease-in-out;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    left: 0;
    transition: left 1s ease-in-out;
}

Hope this helps!

Upvotes: 1

Related Questions