1

My code will show the menu's submenu on hover, now I don't want to run this code if my button is clicked. How can I do this? Both ' subMenuDropDown.preventDefault(); ' and subMenuDropDown.stopPropagation(); don't do the trick.

JsFiddle: https://jsfiddle.net/k4ftf4tx/ 

$('.menu ul li ul').hide();
$('.menu ul li').hover(function(subMenuDropDown) {
  $(this).find("ul").first().stop(true, true).delay(60).slideDown('slow');
}, function() {
  $(this).find("ul").first().stop(true, true).delay(60).slideUp('fast');
});

$('.mobileMenuButton').click(function() {
  $('.menu').toggle();
  subMenuDropDown.preventDefault();
});

As you can see on click it will toggle the menu, but on hover it will still slideDown the submenu.

elJeffe
  • 325
  • 4
  • 12
  • 1
    You'd need to unbind the hover, or set a condition with the button and check against it in your hover function. – Adam Konieska Feb 25 '16 at 14:37
  • Can you clarify your goal? Looking at your JS Fiddle, the only way to open the menu is by clicking on it. If you want to remove the hover ability when clicked, but the only way to open the menu is by clicking, you could just remove the hover code.... – Adam Konieska Feb 25 '16 at 14:42
  • This isn't the fix, but just so you know you've not passed `subMenuDropDown` as a parameter in your click event function so the `preventDefault()` isn't doing anything. – David Wilkinson Feb 25 '16 at 14:42
  • http://api.jquery.com/off/ – online Thomas Feb 25 '16 at 14:43
  • @AdamKonieska what do you exactly mean by unbind? You mean changing it to .mouseover or something? – elJeffe Feb 25 '16 at 14:45
  • @AdamKonieska On big screens you can show the submenu on hover, on mobile I want to show the menu (and submenu) on click. I don't want the hover effect on mobile devices it should just show the menu and submenu when you click on .mobileMenuButton. – elJeffe Feb 25 '16 at 14:46
  • @Jeff what are you doing to determine screen size? Are you adding a class to the body after you've detected screen size? – Adam Konieska Feb 25 '16 at 14:47
  • @AdamKonieska no nothing at this point. When the size is more than +768px the mobile button will hide in CSS, when the size is less than 768px than the mobile button will show and the .menu will have a display:none;. Now I want to that when I click .mobileMenuButton that the menu toggles, but that the hover function will not run and that the submenu will just show without any effects. – elJeffe Feb 25 '16 at 14:53

2 Answers2

2

   // Make submenu dropdown on hover
  $('.menu ul li ul').hide();
  $('.menu ul li').hover(function(subMenuDropDown) {
$(this).find("ul").first().stop(true, true).delay(60).slideDown('slow');
  }, function() {
$(this).find("ul").first().stop(true, true).delay(60).slideUp('fast');
  });
  
  $('.mobileMenuButton').click(function() {
$('.menu').toggle();
    $('.menu ul li').off('mouseenter').off('mouseleave');
  });
.menu {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mobileMenuButton" role="button">
  <p>
    Menu
  </p>
</div>
<div class="menu">
  <ul>
    <li><a href="">Something</a>
      <ul>
        <li>Something else</li>
      </ul>
    </li>
  </ul>
</div>

http://api.jquery.com/off/ As I was too fast: How do I unbind "hover" in jQuery?

Community
  • 1
  • 1
online Thomas
  • 7,441
  • 5
  • 32
  • 67
1

To hover on desktop sites, but us the click on mobile sites you'd need to check to see if its a mobile device and implement your hover accordingly. If you're using a framework like Bootstrap, lots of that work is already done for you.

If not, you can check for mobile devices using something like this: Detecting a mobile browser

Implemented in your code, you'd first detect the device type. If its desktop, add a class and bind your hover event to that menu and class. The end result is that you get the hover on desktop, but mobile devices must use the click.

Something like this would work:

window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
}


if(!window.mobilecheck()) {
    $('.menu').addClass('isDesktop');
}
// Make submenu dropdown on hover


// Make submenu dropdown on hover
  $('.menu.isDesktop ul li ul').hide();
  $('.menu.isDesktop ul li').hover(function(subMenuDropDown) {
        $(this).find("ul").first().stop(true, true).delay(60).slideDown('slow');
  }, function() {
        $(this).find("ul").first().stop(true, true).delay(60).slideUp('fast');
  });

  $('.mobileMenuButton').click(function() {
    $('.menu').toggle();
  });

You can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/k4ftf4tx/3/

Hope that helps!

Community
  • 1
  • 1
Adam Konieska
  • 2,738
  • 3
  • 12
  • 27