我希望整页导航淡入并基本上充当过滤器,除了导航之外模糊整个屏幕。当用户单击菜单按钮时。但是,我似乎无法让它发挥作用。我已经尝试过css模糊过滤器和svg过滤器,我在这个网站上搜索过。有什么我想念的吗?
.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>
mysqlx
答案 0 :(得分: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>