Element unclickable because of overlapping div

Question

I have a transparent background on a fafa menu that animates from the left of the age on click. Because the background is transparent I needed to use fadeTo in my jquery to hide the fa fa-bars when it was clicked so that it didn't show up behind the fa fa-remove when the menu was extended out. Now the fa fa-remove is unclickable though and I can't find anything that fixes it.

Fiddle Here

var main = function() {

  $('.menu-icon').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('#jumbotron').animate({
      left: "300px"
    }, 200);

    $('.menu-icon').fadeTo(
      "fast", 0);

  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-300px"
    }, 200);

    $('#jumbotron').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);

Answer 1

You're always clicking on the menu class. You must take the icon close element out of the nested menu div then animate both elements like you did with the menu element. The browser can't tell you're clicking the icon close, since it is nested inside the menu, which is why it won't fire. The browser can only see you repeatedly clicking the ".menu" element. Hope this helps. I fixed it jsfiddle. Just take the icon-close out of the menu div. (edit) you may want to z-index the icon close higher over the menu div for it to function.

Answer 2

If you're using CSS3 you can try to use the pointer-events css attribute.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

Answer 3

You can do a workaround like I did in this example

So I have integrated both opening and closing functionalities with click event on .menu-icon using opacity and an if-else statement:

$('.menu-icon').click(function() {
   if ($(this).css("opacity") == 1) {
      $('.menu').animate({
         left: "0px"
      }, 200);

      $('#jumbotron').animate({
         left: "300px"
      }, 200);

      $('.menu-icon').fadeTo("fast", 0);

   } else {

      $('.menu-icon').fadeTo("fast", 1);

      $('.menu').animate({
          left: "-300px"
      }, 200);

      $('#jumbotron').animate({
          left: "0px"
      }, 200);
  }
});

Answer 4

Sorry for just giving you the theory. This is the updated code:

In your HTML use this:

    <div class="icon-close">
            <i class="fa fa-remove fa-3x"></i>
         </div>
       <div class="menu">

      <!-- Menu icon -->



         <ul>
            <li>Home</li>
            <li>About Me</li>
            <li>Contact Me</li>
            <li>Gallery</li>
        </ul>
    </div>

<div id="jumbotron">

    <div id="icon-move">
    <div class="menu-icon">
        <i class="fa fa-bars fa-3x"></i>
        </div>


</div>

</div>

In your JQuery, this:

var main = function() {

  $('.menu-icon').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('#jumbotron').animate({
      left: "300px"
    }, 200);

    $('.menu-icon').fadeTo(
      "fast", 0);


    $('.icon-close').animate({
      left: "0px"
    }, 200);

  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-300px"
    }, 200);

    $('.icon-close').animate({
      left: "-300px"
    }, 200);

        $('.menu-icon').fadeTo(
      "fast", 1);

    $('#jumbotron').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);

Cheers.