Disabling jQuery hover effect for menu below 1025px using matchMedia

Question

I run a WordPress site with a custom header. Therefore, I decided to rely on jQuery.

I have a menu (#sitenavigation) that appears when I hover over a container it's in (#menuhover). I only want this to work in viewports that are 1025px and wider using matchMedia. In viewports smaller than that, the buttons that appear (#close-navgation-mobile and #open-navigation-mobile) successfully open and close this menu.

The problem I'm having is successfully disabling the mouseenter/mouseleave functions in viewports smaller than 1025px. How can I edit this code to accomplish this?

$(document).ready(function () {
  if (window.matchMedia("(min-width: 1025px)").matches) {
    $("#menuhover").mouseenter(function () {
      $("#site-navigation").stop(true, false);
      $("#site-navigation").animate({ left: "-2rem", opacity: "1" }, 300);
    });
    $("#menuhover").mouseleave(function () {
      $("#site-navigation").stop(true, false);
      $("#site-navigation").css({ left: "-480px", opacity: "0" });
    });
  } else {
    $("#menuhover").mouseenter(function (event) {
      event.preventDefault();
    });
    $("#menuhover").mouseleave(function (event) {
      event.preventDefault();
    });
  }

  $("#open-navigation-mobile").on("click", function () {
    $("#site-navigation").animate({ left: "-1rem", opacity: "1" }, 250);
    $("#close-navigation-mobile").css({ display: "flex" });
    $("#open-navigation-mobile").css({ display: "none" });
  });
  $("#close-navigation-mobile").on("click", function () {
    $("#site-navigation").animate({ left: "-100vw", opacity: "0" }, 250);
    $("#close-navigation-mobile").css({ display: "none" });
    $("#open-navigation-mobile").css({ display: "flex" });
  });
  $(window).on("beforeunload", function () {
    $("#site-navigation").animate({ left: "-100vw", opacity: "0" }, 250);
    $("#close-navigation-mobile").css({ display: "none" });
    $("#open-navigation-mobile").css({ display: "flex" });
  });
});

I tried the event.preventDefault(); method to not fire the mouseleave/mouseenter functions in viewports smaller than 1025px, expecting nothing to happen when my mouse hovered over #menuhover. Unfortunately, it activated the #sitenavigation menu.

score 0 · Accepted Answer · answered May 19 '23 at 15:32

Does it work for you?

     if (window.matchMedia("(min-width: 1025px)").matches) {
        $("#menuhover").mouseenter(function () {
          $("#site-navigation").stop(true, false);
          $("#site-navigation").animate({ left: "-2rem", opacity: "1" }, 300);
        }).mouseleave(function () {
          $("#site-navigation").stop(true, false);
          $("#site-navigation").css({ left: "-480px", opacity: "0" });
        });
      } else {
        $("#menuhover").on('mouseenter mouseleave', function() {
            return false
         });
      }

Wow, apologies for this late response. I did not see the notification of this response. I truly appreciate your time and effort. I just gave it a try, though, and it seems that it almost works! It only works when the page loads in that viewport, but it's not affected by resizing the window without reloading. — chalcopterus, Jul 04 '23 at 13:34

Disabling jQuery hover effect for menu below 1025px using matchMedia

1 Answers1