4

I know a similar question like this exists here:

CSS3 Element with Opacity:0 (invisible) responds to mouse events

but this question is different.

I'm trying to implement a hamburger navigation menu for mobile devices using jQuery, CSS as mentioned here: Demo.

This mostly works but there's a catch. In the above demo, they are hiding a navigation div which has been fixed to the top (top:0;left:0) by setting opacity:0. While in the above demo this works perfectly, when I implement it, the hidden div responds to clicks and navigates away from the page.

I'm not understanding how this has been disabled in the above demo (double checked the css / js files but no clue). Does anybody else have an idea? I can't really put up a fiddle since I'm trying this in SharePoint and in the fiddle it works. i just need to understand how they've disabled the click events even when using opacity:0 so I can replicate it. Thanks.

11
  • 4
    Generally it’s done with visibility:hidden;. Oct 10, 2015 at 12:23
  • @Xufox I'm aware of that but in the demo, they've achieved this just by using opacity:0. I checked the css for margin / padding changes but couldnt find them.
    – Akhoy
    Oct 10, 2015 at 12:25
  • 2
    you could set pointer-events: none to the div element?? Oct 10, 2015 at 12:28
  • 2
    @FarzadYZ pointer-events will do the trick but it is not a cross-browser solution. I'd rather go with visibility: hidden as @Xufox suggested. Oct 10, 2015 at 12:31
  • 2
    @Akhoy I guess the z-index trick solved the click-able area problem for them. The nav element is z-index:0, and the contentLayer is z-index:5, it means that to the user mouse events, the first priority would be the contentLayer part. Oct 10, 2015 at 12:36

2 Answers 2

5

There are (at least) two things you can do. You could use display: none; or visibility: hidden; instead of opacity: 0;, or you could prevent the menu item being clickable using the preventDefault function in jQuery.

preventDefault would work like this:

$("#hamburger").click(function(e){
  if ($(this).css('opacity')==0) e.preventDefault();
});

Credits to Popnoodles for the code above (Hide clickable links inside div when opacity is 0)

EDIT: I might have misunderstood you're question, since I am now making the hamburger icon unclickable, while I think you ment that the navigation menu needs to be made unclickable, right?

That should work like this:

$('a[class="nav-link"]').click(function(e){
  if ($(nav).css('opacity')==0) e.preventDefault();
});

Add class nav-link to the links in your nav menu.

2
  • Thanks for this. Trying to find out how they did it in the demo instead of like this.
    – Akhoy
    Oct 10, 2015 at 12:46
  • Ok. I've checked the sourcecode of the demo but I can't tell how they do it. What I do know is that using display: none; or visibility: hidden; would be a much cleaner way to do it.
    – Sanderfish
    Oct 10, 2015 at 12:58
3

The implementation they used was to use z-index property in order to change the layer of access users mouse will refer to. Meaning that the element with lower z-index would be in down layer of elements with higher z-index. note that default value for z-index is 1. Just give nav element the z-index:-1; and the content Layer z-index:1 or higher to achieve proper react.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.