我们非常感谢您的帮助。
问题：
基本上，当你第一次打开网页时(只有第一次，或者当你刷新网页时(，你会看到汉堡菜单关闭，我不希望这样，我只希望汉堡菜单在你点击它时打开，在你再次点击它时关闭。
以下是视频中显示的问题：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">
2( .并且您第一次想要打开然后在代码下方流动
<input type="checkbox" checked="checked" class="toggler">
所以，我在某种程度上解决了这个问题。
我去掉了"过渡：所有0.4秒的轻松；"在中
.menu换行.menu>div｛
背景：线性梯度(-45度，#EE7752，#E73C7E，#23A6D5，#23D5AB(；
边界半径：50%；
宽度：200vw；
高度：200vw；
显示：flex；
flex：无；
对齐项目：居中；
调整内容：居中；
变换：比例(0(；
过渡：全部0.4s缓和；
}
现在问题不存在了！但是，现在单击菜单时的转换不存在。