CODEWITHSUNDEEP
htmlcsssvggaussianblur
Saliel Irizarry
Saliel Irizarry

Reputation: 62

Blur Filter for full page navigation

I want to have a full page navigation fade in and essentially act as a filter, blurring the entire screen except for the nav. when a user clicks the menu button. However, I can't seem to get it to work. I've tried the css blur filter and svg filters and I've searched all over this site. Is there anything I'm 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>

Upvotes: 0

Views: 1284

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You could target as well from your script the main content to blur :

$('.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>

Upvotes: 1

Related Questions