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.

Community
  • 1
  • 1
Akhoy
  • 502
  • 1
  • 13
  • 24
  • 4
    Generally it’s done with `visibility:hidden;`. – Sebastian Simon Oct 10 '15 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 '15 at 12:25
  • 2
    you could set pointer-events: none to the div element?? – Farzad Yousefzadeh Oct 10 '15 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. – Hashem Qolami Oct 10 '15 at 12:31
  • @FarzadYZ I'm really looking to do it like in that demo. Trying to find out how they did it just using opacity:0. – Akhoy Oct 10 '15 at 12:32
  • 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. – Farzad Yousefzadeh Oct 10 '15 at 12:36
  • @FarzadYZ tried giving the parent a higher z-index than the child. Still is clickable. Would be pretty helpful if you could demonstrate that in a fiddle. Also, the contentLayer is hidden initially. – Akhoy Oct 10 '15 at 12:48
  • Do you have 'position:fixed' in your code? and does the menu take up any space for you? It's difficult to troubleshoot without seeing your code. In the Demo you reference if you go into developer tools and remove opacity:0 you can see the background of the menu, but the menu items remain hidden and cannot be clicked so focusing on opacity is probably throwing you off course. – Steve Oct 10 '15 at 13:05
  • @Steve same set up as in the demo. Just the clickable part differs. – Akhoy Oct 10 '15 at 13:53
  • @FarzadYZ tried with the z-index method again and it worked. Though I had to give it a negative z-index to truly stop the anchors from getting clicked. Setting it to 0 didn't work. Please add it as an answer so I can mark it. Thanks a lot for your help :) – Akhoy Oct 10 '15 at 14:30
  • I did @Akhoy. glad that helped ;) – Farzad Yousefzadeh Oct 10 '15 at 14:35

2 Answers2

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.

Community
  • 1
  • 1
Sanderfish
  • 1,470
  • 1
  • 12
  • 15
  • Thanks for this. Trying to find out how they did it in the demo instead of like this. – Akhoy Oct 10 '15 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 '15 at 12:58
  • Thanks for your time, Sanderfish. Your method is probably the better way to do it. +1 for that. Thanks for your help. – Akhoy Oct 10 '15 at 14:38
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.

Farzad Yousefzadeh
  • 2,461
  • 1
  • 20
  • 27
  • Thanks for your time. Can't believe I wasted so much time on this. I gave the negative z-index on the ul btw. – Akhoy Oct 10 '15 at 14:36