I am trying to create a full page navigation that will fade in and act as a filter, blurring the entire screen except for the navigation, when a user clicks the menu button. I have attempted using CSS blur filters and SVG filters but have not been successful so far. Is there something crucial that I may be missing?
$('.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>