我有一个off-screen nav
的模板,单击toggle
时该模板从左侧滑入。我想发生的是nav
滑入时,覆盖层会使后面的内容变暗。为此,我将页面内容包装在div
中,并尝试添加BG颜色来覆盖该内容,但似乎不起作用。
有人可以帮忙吗?下面的代码:
$(document).ready(function() {
var toggle = $('.toggle');
var osNav = $('.offScreen-nav');
var pageContainer = $('.page-container');
toggle.click(function() {
osNav.toggleClass('showNav');
pageContainer.toggleClass('navOnScreen')
});
})
* {
margin: 0;
padding: 0;
overflow: hidden;
}
nav {
width: 100%;
height: 70px;
//border: 1px solid;
background-color: #f1f1f1;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.toggle {
height: 50px;
width: 50px;
border: 1px solid;
background-color: rgba(17,17,17, .9);
opacity: .9;
margin: 20px 15px;
cursor: pointer;
align-self: center;
}
main {
height: 1000px;
background-color: #ddd;
}
.offScreen-nav {
width: 340px;
height: 100vh;
position: fixed;
margin-left: 0;
overflow: hidden;
z-index: 2000;
background-color: rgba(17,17,17, .9);
transition: all .3s ease-in-out;
transform: translate3d(-340px,0,0);
}
.showNav {
transform: translate3d(0,0,0);
}
.page-container {
transform: translate3d(0,0,0);
transition: all .3s ease-in-out;
transition-delay: .1s;
}
.page-container.navOnScreen {
background-color: rgba(0,0,0, .6);
transform: translate3d(20px,0,0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="offScreen-nav"></div>
<div class="page-container">
<nav>
<div class="toggle"></div>
</nav>
<main></main>
</div>
最佳答案
我通常要做的是添加另一个称为overlay的元素,并在切换导航项以产生效果时切换它。我还会将切换按钮从导航栏中移出,以便为它提供一个绝对位置,因为启用叠加层时需要应用z-index使其保持可见。见下文...希望对您有所帮助!
$(document).ready(function() {
var toggle = $('.toggle');
var osNav = $('.offScreen-nav');
var overlay = $('.overlay');
var pageContainer = $('.page-container');
toggle.click(function() {
osNav.toggleClass('showNav');
overlay.toggleClass('showNav');
pageContainer.toggleClass('navOnScreen')
});
})
* {
margin: 0;
padding: 0;
overflow: hidden;
}
nav {
width: 100%;
height: 70px;
//border: 1px solid;
background-color: #f1f1f1;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.toggle {
height: 50px;
width: 50px;
border: 1px solid;
background-color: rgba(17,17,17, .9);
opacity: .9;
/* margin: 20px 15px; */
cursor: pointer;
align-self: center;
position: absolute;
top: 10px;
right: 15px;
z-index: 2;
}
main {
height: 1000px;
background-color: #ddd;
}
.offScreen-nav {
width: 340px;
height: 100vh;
position: fixed;
margin-left: 0;
overflow: hidden;
z-index: 2000;
background-color: rgba(17,17,17, .9);
transition: all .3s ease-in-out;
transform: translate3d(-340px,0,0);
}
.showNav {
transform: translate3d(0,0,0);
}
.page-container {
transform: translate3d(0,0,0);
transition: all .3s ease-in-out;
transition-delay: .1s;
}
.page-container.navOnScreen {
background-color: rgba(0,0,0, .6);
transform: translate3d(20px,0,0);
}
.overlay.showNav {
width: 100vw;
height: 100vh;
background: blue;
position: fixed;
z-index: 1;
}
.overlay{
transition:0.3s ease;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="offScreen-nav"></div>
<div class="overlay"></div>
<div class="toggle"></div>
<div class="page-container">
<nav>
</nav>
<main></main>
</div>