setTimeout(() => {
document.getElementById('me').classList.add('fade');
}, 2000);*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.menu-wrap{
position: fixed;
top: 0;
right: 0;
z-index: 1;
}
.toggler{
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
height: 50px;
width: 50px;
opacity: 0;
}
.hamburger{
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
}
/*hamburger line*/
.hamburger > div{
position: relative;
width: 100%;
height: 2px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.hamburger > div:before,
.hamburger > div:after{
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
.hamburger > div:after{
top: 10px;
}
/*show when clicked*/
.menu-wrap .toggler:checked ~ .menu{
visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div{
transform: scale(1);
transition-duration: 0.7s;
}
.menu-wrap .toggler:checked ~ .menu > div > div{
opacity: 1;
transition: 0.4s ease;
}
.toggler:checked + .hamburger > div{
transform: rotate(135deg);
}
/* turn lines into x*/
.toggler:checked + .hamburger > div:before,
.toggler:checked + .hamburger > div:after{
top: 0;
transform: rotate(90deg);
}
/*rotate on hover when checked*/
.toggler:checked:hover + .hamburger > div{
transform: rotate(225deg);
}
.menu-wrap .menu{
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu > div{
background: #000;
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
.menu > div > div{
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
}
.menu > div > div > ul >li{
list-style: none;
padding: 1rem;
color: #fff;
}
.menu > div > div > ul > li > a{
text-decoration: none;
transition: 0.4s ease;
color: #fff;
}
body{
background-color: #1a1a1a;
color: #fff;
font-family: sans-serif;
font-size: 1.3rem;
line-height: 2rem;
}
#first{
font-size: 5rem;
}
#me{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url("images/mecrop2.jpg");
z-index: 3;
display:flex;
align-items: center;
justify-content: center;
transition: opacity 2.5s;
}
.fade#me{
opacity: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="mywebsite.css">
</head>
<body>
<div id="me">
<h1 id="first">Hi! I'm Ben.</h1>
</div>
<header>
<div class="name">
<h1>Ben Mikola</h1>
</div>
</header>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li><a href="#">What I'm Doing Now</a></li>
<li><a href="#">Dating/Relationships</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Contact Me!</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>只有当id为"me"的第一个div不在时，汉堡包菜单才有效。为什么div会干扰菜单的功能？我试着更改div的z索引。我把它移到了HTML的底部。我想可能是JavaScript搞砸了它，但我不知道该改变什么，因为我对JavaScript了解不多。
#me的z-index高于.menu-wrap。因此，在不更改标记的情况下，您可以简单地执行：.menu-wrap: z-index: 9;，仅此而已。
#mediv与汉堡菜单重叠，并阻止点击进入菜单。其宽度为100%，CCD_ 6为3。修复它的最简单方法是将#me的z-index设置为-1，以便它位于页面上的所有内容之后。