任何帮助表示赞赏和感谢。
问题:
基本上当你第一次打开网页时(只有第一次，或者当你刷新网页时)你会看到汉堡菜单关闭，我不想要这个，我只希望汉堡菜单在你点击它后打开再次单击时关闭。
这是视频中显示的问题:https://www.youtube.com/watch?v=NRYnvGgtqd0
(刷新页面时出现问题)
我已经插入了代码:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
font-family: "Calibri", Arial;
}
section{
width: 100%;
height: 100vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
position: relative;
animation: change 10s ease-in-out infinite;
}
h1{
font-size: 5rem;
text-transform: uppercase;
letter-spacing: 2px;
border: 3px solid #fff;
position: absolute;
top: 50%;
left: 50%;
padding: 5rem 10rem;
transform: translate(-50%, -50%);
}
@keyframes change {
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}
.menu-wrap{
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler{
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .hamburger > div {
position: relative;
width: 100%;
height: 2px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
.menu-wrap .hamburger > div:after {
top: 10px;
}
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
.menu-wrap .toggler:checked:hover + .hamburger > div{
transform: rotate(225deg);
}
.menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: 0.4s ease;
}
.menu-wrap .toggler:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease;
}
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu > div {
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
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-wrap .menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
.menu-wrap .menu > div > div > ul > li {
list-style: none;
color: white;
font-size: 1.5rem;
padding: 1rem;
}
.menu-wrap .menu > div > div > ul > li > a {
color: inherit;
text-decoration: none;
transition: color 0.4s ease;
font-size: 25px;
}
.menu-wrap .menu > div > div > ul > li > a:hover {
background-color: white;
color: gray;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pranav's Portfolio</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Assignment 1</a></li>
<li><a href="">Assignment 2</a></li>
<li><a href="">Assignment 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<section>
<h1 class="animatedText">Hello, I'm Pranav</h1>
</section>
</body>
</html>最佳答案
1)。如果你希望你的菜单第一次显示关闭然后在代码下面流动
<input type="checkbox" class="toggler">
<input type="checkbox" checked="checked" class="toggler">
关于html - 为什么我的汉堡菜单在我第一次打开页面时关闭？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67003451/