在像疯子一样煎熬了4天后，我需要让这个菜单启动并运行。我需要帮助。
当我点击汉堡包菜单时，它不旋转(什么都没有发生)。
最奇怪的是……
在我的本地Xampp服务器上，汉堡包菜单没有按预期旋转。
但是…在copepen测试块中，汉堡包菜单旋转。
我测试这个行为的浏览器:Chrome - Firefox - Brave
这是codepen的在线版本。
(https://codepen.io/paulodoporto/pen/WNyOEVR)
请问我做错了什么?<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mr.Buildbox</title>
</head>
<body>
<header class="sticky-top">
<!-- header menu on the fron-end page-->
<div class="logo">
<a href="#"><img src="https://localhost/mrbuildbox/buildboxdesafio/assets/images/catdog2.png" alt="" class="responsive-image"></a>
</div>
<div class="container">
<!-- Hamburger Menu Tag -->
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<div class="menu-top-menu-container"><!-- It's not possible remove this Tag -->
<ul id="menu-top-menu" class="navigation-class">
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-15"><a href="https://localhost/mrbuildbox/" aria-current="page">IPB Instituto</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="https://localhost/mrbuildbox/create-page-test/">quem somos</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="https://localhost/mrbuildbox/faleconosco/">fale conosco</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a href="https://localhost/mrbuildbox/category/blog/">blog</a></li>
</ul>
</div>
</div><!-- end <div class="container"> -->
</header>
{这是CSS文件}
body {
background-color: #e7e7e7;
font-family: Rubik, sans-serif;
font-weight: 400;
}
/*img logo header*/
.responsive-image {
width: 100%;
height: auto;
}
/*new css style - 20:28 10.11.2022*/
header {
position: relative;
width: 100%;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #4527a0;
padding: 0 25px;
transition: 0.3s;
}
.logo a {
display: block;
}
.logo a img {
display: block;
width: 100%;
}
/* .navigation{} reference */
.menu-top-menu-container {
display: flex;
justify-content: space-between;
align-items: center;
float: right;
}
/* .menu{} reference */
ul#menu-top-menu {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
z-index: 1;
transition: 0.5s;
text-transform: uppercase;
}
ul#menu-top-menu li {
list-style-type: none;
/* -webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg); */
}
ul#menu-top-menu li a {
color: #fff;
text-decoration: none;
display: block;
/* display: inline-block; */
padding: 40px 25px;
font-size: 16px;
line-height: 1;
transition: 0.3s;
}
ul#menu-top-menu li a:hover {
box-shadow: 0 -5px 0px #fff inset, 500px 0 0 rgba(255, 255, 255, 0.03) inset;
padding: 35px 25px 45px 25px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
float: right;
text-align: right;
right: 0;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 25px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger,
.toggle-menu {
display: none;
}
/* .navigation{} reference */
.container input:checked ~ .hamburger {
background: transparent;
}
/*The rotation behavior settings, but Onclick nothing happens.*/
.container input:checked ~ .hamburger:before {
top: 0;
transform: rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
width: 30px;
}
/*The rotation behavior settings, but Onclick nothing happens.*/
.container input:checked ~ .hamburger:after {
top: 0;
transform: rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
width: 30px;
}
/*The rotation behavior settings, but Onclick nothing happens.*/
.container input:checked ~ .menu-top-menu-container > #menu-top-menu {
right: 0;
box-shadow: -20px 0 40px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 992px) {
.hamburger,
.toggle-menu {
display: block;
float: right;
align-items: center;
text-align: right;
}
header {
padding: 10px 20px;
}
ul#menu-top-menu {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: 0px;
background: #4527a0;
width: 300px;
height: 100%;
padding-top: 65px;
}
ul#menu-top-menu li {
width: 100%;
}
ul#menu-top-menu li a {
padding: 22px;
font-size: 16px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
}
.toggle-menu班级顶级位置。你没有宣布你的最高职位。这就是为什么它和图标不匹配。像这样更新位置toptop:0;这将解决问题。https://codepen.io/salmanaabir/pen/QWxgOwV
@import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700);
body {
background-color: #e7e7e7;
font-family: Rubik, sans-serif;
font-weight: 400;
}
/*img logo header*/
.responsive-image {
width: 100%;
height: auto;
}
/*new css style - 20:28 10.11.2022*/
header {
position: relative;
width: 100%;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #4527a0;
padding: 0 25px;
transition: 0.3s;
}
.logo a {
display: block;
}
.logo a img {
display: block;
width: 100%;
}
/* .navigation{} reference */
.menu-top-menu-container {
display: flex;
justify-content: space-between;
align-items: center;
float: right;
}
/* .menu{} reference */
ul#menu-top-menu {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
z-index: 1;
transition: 0.5s;
text-transform: uppercase;
}
ul#menu-top-menu li {
list-style-type: none;
/* -webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg); */
}
ul#menu-top-menu li a {
color: #fff;
text-decoration: none;
display: block;
/* display: inline-block; */
padding: 40px 25px;
font-size: 16px;
line-height: 1;
transition: 0.3s;
}
ul#menu-top-menu li a:hover {
box-shadow: 0 -5px 0px #fff inset, 500px 0 0 rgba(255, 255, 255, 0.03) inset;
padding: 35px 25px 45px 25px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
float: right;
text-align: right;
right: 0;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 25px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
top:0;
}
.hamburger,
.toggle-menu {
display: none;
}
/* .navigation{} reference */
.container input:checked~.hamburger {
background: transparent;
}
.container input:checked~.hamburger:before {
top: 0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
width: 30px;
}
.container input:checked~.hamburger:after {
top: 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
width: 30px;
}
/* #menyAvPaa:checked ~ #meny {} */
.container input:checked~.menu-top-menu-container>#menu-top-menu {
right: 0;
box-shadow: -20px 0 40px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 992px) {
.hamburger,
.toggle-menu {
display: block;
float: right;
align-items: center;
text-align: right;
}
header {
padding: 10px 20px;
}
ul#menu-top-menu {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: 0px;
background: #4527a0;
width: 300px;
height: 100%;
padding-top: 65px;
}
ul#menu-top-menu li {
width: 100%;
}
ul#menu-top-menu li a {
padding: 22px;
font-size: 16px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header class="sticky-top">
<!-- header menu on the fron-end page-->
<div class="logo">
<a href="#"><img
src="https://localhost/mrbuildbox/wp-content/themes/buildboxdesafio/assets/images/catdog2.png"
alt="" class="responsive-image"></a>
</div>
<div class="container">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<div class="menu-top-menu-container">
<ul id="menu-top-menu" class="navigation-class">
<li id="menu-item-15"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-15">
<a href="https://localhost/mrbuildbox/" aria-current="page">IPB Instituto</a>
</li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16">
<a href="https://localhost/mrbuildbox/create-page-test/">quem somos</a>
</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">
<a href="https://localhost/mrbuildbox/faleconosco/">fale conosco</a>
</li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28">
<a href="https://localhost/mrbuildbox/category/blog/">blog</a>
</li>
</ul>
</div>
</div><!-- end <div class="container"> -->
</header>
</body>
</html>