CODEWITHSUNDEEP
javascriptjquery
Kaya.T
Kaya.T

Reputation: 31

Animating CSS-Only Hamburger Menu Icon on hover not on click

I hope someone can help me with this.

I want to use one of the Hamburger Icon transitions from http://callmenick.com/post/animating-css-only-hamburger-menu-icons

The jquery for the Icon transition is triggered on .click event. I would like it to trigger on hover or mouseover and out so the animation is played on hover and reversed when the mouse is out.

Here is the script that needs to be changed. 

    // Animated Hamburger Icon
    (function() {

    "use strict";

    var toggles = document.querySelectorAll(".c-hamburger");

    for (var i = toggles.length - 1; i >= 0; i--) {
      var toggle = toggles[i];
      toggleHandler(toggle);
    };

    function toggleHandler(toggle) {
      toggle.addEventListener( "click", function(e) {
        e.preventDefault();
        (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
      });
    }

  })();

Upvotes: 0

Views: 863

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Because you're using jQuery you could use hover() event with toggleClass() method :

function toggleHandler(toggle) {
     $( toggle ).hover(function(){
         $(this).toggleClass("is-active");
     });
}

Hope this helps.

Upvotes: 3

christoz
christoz

Reputation: 56

I think you need to do smth like this

      (function() {

            "use strict";

            var toggles = document.querySelectorAll(".c-hamburger");

            for (var i = toggles.length - 1; i >= 0; i--) {
              var toggle = toggles[i];
              toggleHandler(toggle);
            };

            function toggleHandler(toggle) {
                toggle.addEventListener( "click", function(e) {
                    e.preventDefault();
                    (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
                });
                toggle.addEventListener( "mouseover", function(e) {
                    e.preventDefault();
                    this.classList.add("is-active");
                })
                toggle.addEventListener( "mouseout", function(e) {
                    e.preventDefault();
                    this.classList.remove("is-active");
                })         
            }

        })();

Upvotes: 1

Julian Guterman
Julian Guterman

Reputation: 187

https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

In the example provided, look at line 24.

You can just replace 'click' with 'mouseover', it will behave the way you want.

Upvotes: 0

Related Questions