CSS overlay when the menu is accessed not working correctly

Question

I have a website where there is implemented a CSS overlay when the menu is accessed. This overlay fades in and out over the rest of the page but not the menu itself via the z-index. All works well on mouseover, the overlay fades in, and the rest looks dimmed.

However when the mouse is not on the menu anymore, the fadeout of the overlay is messed up. The overlay itself fades out correctly, but all images show up immediately (opacity 1?) and that makes it look strange. I think the images have to be fade-in when the overlay fades-out. You can see an example on www.appartement-tekoop.nl of the behavior.

I think the problem is with the z-index of the images, but am not sure.

This is my javascript for the overlay:

 <script type="text/javascript">
     jQuery(function () {
          var $menu_main_nav = jQuery('#menu-main-nav');
          var $menu_main_nav_items = $menu_main_nav.children('li');
          var $oe_overlay = jQuery('#oe_overlay');
          var $pricetable_dropdown = jQuery(".price-header");
          var $menutoggle = jQuery('.menutoggle');
          var $mainmenu = jQuery('.main-nav');

          $menu_main_nav_items.bind('mouseenter', function () {
                var $this = jQuery(this);
                $this.children.addClass('slided selected');

                // updated code starts
                if($this.children('.menu-item-has-children').hasClass('not-shown')){
                    $menu_main_nav_items.not('.slided').children('.menu-item-has-children').hide();
                    $this.removeClass('slided');
                }
                else {
                    $this.children('.menu-item-has-children').css('z-index', '9999').stop(true, true).slideDown(200, function () {
                          $menu_main_nav_items.not('.slided').children('.menu-item-has-children').hide();
                          $this.removeClass('slided');
                    });
                }
                // updated code ends
          })

          .bind('mouseleave', function () {
                var $this = jQuery(this);
                $this.removeClass('selected').children('.menu-item-has-children').css('z-index', '1');
          });

          $menu_main_nav.bind('mouseenter', function () {
                var $this = jQuery(this);
                $oe_overlay.stop(true, true).fadeTo(1000, 0.3);
                $oe_overlay.css('z-index', '40');
                $this.addClass('hovered');
           })

           .bind('mouseleave', function () {
                var $this = jQuery(this);
                $this.removeClass('hovered');
                $oe_overlay.stop(true, true).fadeTo(1000, 0);
                $oe_overlay.css('z-index', '0');
                $menu_main_nav_items.children('.menu-item-has-children').hide();
          });

          $pricetable_dropdown.bind('click', function() {
                if (jQuery( this ).hasClass('clicked')) {
                    jQuery( this ).removeClass('clicked');
                    jQuery( 'section.detail-page' ).css('display', 'none');
                    jQuery( 'section.detail-page' ).css('display', 'block');
                } else {
                    jQuery( this ).addClass('clicked');
                    // $initialDivHeight = jQuery('section.detail-page').height();
                }
                jQuery( this ).next().fadeToggle();
          });

          $menutoggle.bind('click', function() {
                $mainmenu.toggle();
          });
     });
 </script>

Answer 1

You're right, the z-index is messing things up... The Overlay is jumping behind some elements on the page before the transition has finished.

There is no need to change the overlays z-index on mouseover, remove this from your JS. Set the overlays 'z-index: 40' in your css and set it to 'display: none' also.

Thats all you need. When you fadeOut() an element it sets 'display: none' on it after it's finished animating, so your mouse won't be able to interact with it, and you can click on anything underneath it.

Hope this helps!