Понижение фоновой страницы с выпадающим меню JQuery

Question

Я хочу создать меню dropdwon, подобное тому, которое находится на сайте Edinburgh Zoo, которое исчезает на странице в фоновом режиме, когда оно находится в действии.

Имейте это до сих пор. jsfiddle Я не могу понять, как я получу фон, чтобы исчезнуть, любые идеи?

var stop = true; 
var hovered; 
var timeout; 

$('.nav').hover(
    function(){ 
     clearTimeout(timeout); 
     stop = true; 
     hovered = this; 
     timeout = setTimeout(function(){ 
     if($(hovered).hasClass('nav_menu_link_drop')){ 
      $('.content').css('z-index',0); 
      $(hovered).next('.content').css('z-index',5);   
      $(hovered).next('.content').slideDown(350); 
      timeout = setTimeout(function(){ 
       $('.content').not($(hovered).next('.content')).slideUp(350); 
      },200); 
     } 
     else 
      $('.content').slideUp(350);  
     },400); 
    }, 
    function(e){ 
     stop = false; 
     clearTimeout(timeout); 
     setTimeout(function(){ 
      if(!stop) 
       $('.content').slideUp(350); 
     },500); 
    } 
); 

$('.content').hover(
    function(){ 
     stop = true;  
    }, 
    function(){ 

    } 
); 

$('#nav_menu').hover(
    function(){ 

    }, 
    function(){ 
     timeout = setTimeout(function(){ 
      $('.content').slideUp(350); 
     },200); 
    } 
); 

Answer 1

Вы можете достичь этого путем добавления нового element, который будет выступать в качестве back-drop эффекта.

E.g.

Поместите этот код в нижнюю часть тега body.

<div class="back-drop"></div> 

Затем назначьте ему css properties.

.back-drop { 
    background: rgba(0,0,0,.5); 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    display: none; 
} 

Кроме того, добавьте z-index: 9999; к #nav_menu в вашем CSS.

#nav_menu { 
    position: absolute; 
    display: block; 
    height: 80px; 
    width: 100%; 
    background: orange; 
    z-index: 9999; 
} 

Добавить этот код на Jquery кодов.

$('.nav_menu_link_drop').hover(
     function() { 
      $('.back-drop').css('display', 'block'); 
     }, 
     function() { 
      $('.back-drop').css('display', 'none'); 

     } 
); 

Кроме того, добавьте $('.back-drop').css('display', 'block'); и $('.back-drop').css('display', 'none'); к вашему $('.content').hover();.

$('.content').hover(
     function() { 
      $('.back-drop').css('display', 'block'); 
      stop = true; 
     }, 
     function() { 
      $('.back-drop').css('display', 'none'); 
     } 
); 

Вот JsFiddle link.

Надеюсь, это поможет.