0
我遇到了菜單覆蓋問題，當我打開菜單中的背景內容仍然可見時，我嘗試使用Z-index播放，但沒有幫助。菜單覆蓋問題
當您打開菜單時，該段落顯示爲淺灰色。
$("#menu").click(function() {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(this).toggleClass('open');
});* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
html {
color: #222;
font-family: Avenir, sans-serif;
}
a {
color: #111;
display: inline-block;
text-decoration: none;
padding: 10px 0;
text-transform: uppercase;
font-weight: lighter;
opacity: .7;
transition: all 0.4s ease-in-out;
}
a:hover {
opacity: 1;
}
.nav {
text-align: right;
float: right;
}
.nav li {
transition-delay: 0.15s;
transform: translate(30px, 0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
transform: translate(0px, 0);
opacity: 1;
}
.nav.is-open li:nth-child(1) {
transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
transition-delay: .3s;
}
.nav.is-open li a {
color: #fff;
}
#menu {
float: right;
width: 25px;
height: 15px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor: pointer;
}
#menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #222;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
top: 9px;
}
#menu span:nth-child(4) {
top: 18px;
}
#menu.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span {
background: #fff;
}
header {
float: right;
padding: 50px;
}
header {
position: relative;
}
.overlay {
background: transparent;
width: 100%;
height: 100vh;
z-index: -4;
transition: background .5s ease-in-out;
}
.overlay.is-visible {
background: #000;
position: absolute;
z-index: -2;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="menu" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<nav>
<ul class="nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Portfolio</a>
</li>
<li><a href="#">Blog</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
<div class="overlay">Hello,<br>this is the para that is still visible when you open the menu</div>
這是因爲它是應用了不同性質相同的元素。你可能需要將paragrph包裝在一個你可以改變其z-index（或不透明度等）的元素中。或者您實際上需要將打開的菜單作爲「位於最上面」的不同項目。另一個'技巧'將打開菜單背景＃222或使您的正文文本顏色＃000。 – lharby
，因爲你的標題元素沒有覆蓋你的.overlay div – Laravel14
@lharby另一個技巧將不會像我的網頁一樣工作我有不同的顏色元素和菜單和段落坐在同一視圖 – user1749105