Фильтр размытия для полной навигации по страницам

Question

Я хочу, чтобы полная навигация по страницам затухала и, по сути, действовала как фильтр, размывая весь экран, кроме навигатора. когда пользователь нажимает кнопку меню. Однако я не могу заставить его работать. Я пробовал фильтр css blur и фильтры svg, и я искал по всему сайту. Есть что-то, чего я не хватает?

$('.nav').hide(); 
 
$('.hamburger').click(function(){ 
 
    $('.nav').fadeToggle('slow'); 
 
    $('.hamburger div').toggleClass('turn-white'); 
 
}); 
 
$('.nav-dropdown-toggle > span > a, .navigation > li > a, .nav-dropdown > li > a').click(function(){ 
 
    $('.nav').fadeToggle('slow'); 
 
    $('body').toggleClass('disable-scroll'); 
 
});

.nav{ 
 
    height:100vh; 
 
    width:100%; 
 
    position:fixed; 
 
    z-index:5; 
 
    display:none; 
 
    text-align:right; 
 
} 
 
#nav_bg{ 
 
    height:100%; 
 
    width:100%; 
 
    position:absolute; 
 
    z-index:100; 
 
    background-color:rgba(0,0,0,0.5); 
 
    filter: blur(15px); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="hamburger">Menu Button</button> 
 

 
<div class="nav"> 
 
     <div id="nav_bg"></div> 
 
     <ul class="navigation"> 
 
      <li class="nav-dropdown-toggle"><span><a href="#packages">Packages</a></span> 
 
       <ul class="nav-dropdown"> 
 
        <li><a>Business Packages</a></li> 
 
        <li><a>Top Producers</a></li> 
 
        <li><a>Video Ads</a></li> 
 
        <li><a>Proud Community Sponsor</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#campaigns">Campaign Options</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li><a href="#">Log In</a></li> 
 
      <li> 
 
       <a href="https://www.facebook.com/Supporting-Our-Community-com-1081805428499269/?ref=hl" class="social"><img src="img/402-facebook2.svg"></a> 
 
       <a href="https://www.youtube.com/channel/UCvmPcOGA69v2onNJHDAFwYg" class="social"><img src="img/414-youtube.svg" style="width:47px;"></a> 
 
       <a href="https://www.linkedin.com/in/SupportingOurCommunity" class="social"><img src="img/458-linkedin.svg"></a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 

 
<div class="example-content"> 
 
<h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3>

Answer 1

Вы могли предназначаться, а из вашего сценария основное содержание стираться:

$('.nav').hide(); 
 
$('.hamburger').click(function(){ 
 
    $('.nav').fadeToggle('slow'); 
 
    $('.hamburger div').toggleClass('turn-white'); 
 
    $('.example-content').toggleClass('blur'); 
 
}); 
 
$('.nav-dropdown-toggle > span > a, .navigation > li > a, .nav-dropdown > li > a').click(function(){ 
 
    $('.nav').fadeToggle('slow'); 
 
    $('body').toggleClass('disable-scroll'); 
 
});

.nav{ 
 
    height:100vh; 
 
    width:100%; 
 
    position:fixed; 
 
    z-index:5; 
 
    display:none; 
 
    text-align:right; 
 
} 
 
#nav_bg { 
 
    height:100%; 
 
    width:100%; 
 
    position:absolute; 
 
    z-index:100; 
 
    background-color:rgba(0,0,0,0.5); 
 
} 
 
.blur{ 
 

 
    filter: blur(5px); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="hamburger">Menu Button</button> 
 

 
<div class="nav"> 
 
     <div id="nav_bg"></div> 
 
     <ul class="navigation"> 
 
      <li class="nav-dropdown-toggle"><span><a href="#packages">Packages</a></span> 
 
       <ul class="nav-dropdown"> 
 
        <li><a>Business Packages</a></li> 
 
        <li><a>Top Producers</a></li> 
 
        <li><a>Video Ads</a></li> 
 
        <li><a>Proud Community Sponsor</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#campaigns">Campaign Options</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li><a href="#">Log In</a></li> 
 
      <li> 
 
       <a href="https://www.facebook.com/Supporting-Our-Community-com-1081805428499269/?ref=hl" class="social"><img src="img/402-facebook2.svg"></a> 
 
       <a href="https://www.youtube.com/channel/UCvmPcOGA69v2onNJHDAFwYg" class="social"><img src="img/414-youtube.svg" style="width:47px;"></a> 
 
       <a href="https://www.linkedin.com/in/SupportingOurCommunity" class="social"><img src="img/458-linkedin.svg"></a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 

 
<div class="example-content"> 
 
<h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3> 
 
    <h3>THIS SHOULD BE BLURRED</h3>