我想创建一个动画汉堡菜单，其中的按钮可扩展到下一个级别。 我知道我的代码与之相距甚远，但是我完全陷入了问题。而且无论如何都会向您显示我的进度。 https://jsfiddle.net/TheBB23/hnsjym9u/
我从一个网站复制了此代码，以使您清楚了解我想要的内容。 https://jsfiddle.net/TheBB23/uw2jzge1/
正如我所说，我完全陷入困境，将不胜感激。
object$('.circle-plus').on('click',function() {
$(this).toggleclass('opened');
})
var coll = document.getElementsByClassname("hamburger");
var hideLinks = document.querySelectorAll('.mobilemenuitems a');
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click",function() {
this.classList.toggle("active");
var mobilemenuitems = this.nextElementSibling;
if (mobilemenuitems.style.display === "block") {
mobilemenuitems.style.display = "none";
} else {
mobilemenuitems.style.display = "block";
}
});
}
var hamburger = document.querySelector(".hamburger");
var header = document.querySelector(".header");
// On click
hamburger.addEventListener("click",function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
header.classList.toggle("header--is-active");
// Do something else,like open/close menu
});
document.onload = document.getElementsByClassname("mobilemenuspace")[0].style.display = "none";
document.getElementsByClassname("mobilemenuspace")[0].addEventListener("click",function() {
this.style.display = "none";
hamburger.classList.toggle("is-active");
});body {
margin: 0px;
padding: 0px;
background: white;
color: #24603c;
font-family: Arial,Helvetica,sans-serif;
height: 100%;
}
section {
height: 50px;
width: 100%;
}
/* Responsive (Smartphone) Menu */
@media (max-width: 1000px) {
/* Bild oben links Style */
.logo img {
height: 50px;
position: fixed;
float: left;
z-index: 3;
}
.login-container {
display: none;
}
.LogoutArea {
display: none;
}
#nav {
display: none;
}
/* Platzhalter Menü*/
section {
height: 50px;
width: 100%;
background: rgba(237,237,1);
background: -moz-linear-gradient(top,rgba(237,1) 0%,rgba(246,246,1) 53%,rgba(255,255,1) 100%);
background: -webkit-gradient(left top,left bottom,color-stop(0%,1)),color-stop(53%,color-stop(100%,1)));
background: -webkit-linear-gradient(top,1) 100%);
background: -o-linear-gradient(top,1) 100%);
background: -ms-linear-gradient(top,1) 100%);
background: linear-gradient(to bottom,1) 100%);
filter: progid:DXImageTransform.microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff',GradientType=0);
}
.nav {
height: 50px;
width: 100%;
background: #24603c;
position: fixed;
z-index: 2;
}
#BurgerSpace>div>button {
position: fixed;
right: 0px;
top: 0px;
z-index: 3;
background: none;
}
#BurgerSpace {
position: relative !important;
}
#BurgerSpace>div {
position: relative !important;
}
#BurgerSpace>div>div {
display: block;
margin-top: 50px;
}
#BurgerSpace {
width: 100%;
height: 50px;
display: block;
position: absolute;
float: right;
margin-right: 0;
padding-right: 0px;
padding-top: -2px;
}
}
.mobilemenuspace {
display: none;
width: 100%;
position: relative;
z-index: 1;
right: 0;
margin-top: 50px;
background: white;
}
@media (min-width: 1000px) {
.mobilemenuspace {
display: none !important;
}
}
#mobilemenufirstorder>a {
text-decoration: none !important;
font-weight: bold;
list-style: none !important;
font-size: 28px;
line-height: 28px;
height: 100%;
display: block;
height: 28px;
padding-top: 26px;
padding-bottom: 26px;
padding-left: 25px;
}
#mobilemenufirstorder>a:hover {
color: lightgrey !important;
}
#mobilemenufirstorder>a:hover+div {
display: block !important;
}
#mobilemenufirstorder {
height: 80px;
width: 100%;
border-bottom: solid 2px lightgrey;
border-top: solid 2px lightgrey;
list-style: none !important;
text-decoration: none !important;
}
.mobilemenuitems>li {
list-style: none;
text-decoration: none;
}
.mobilemenuitems {
display: block;
}
.mobilemenusecondorder {
display: none;
}
.closed .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
}
.closed .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
opacity: 1;
}
.opened {
opacity: 1;
}
.opened .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
}
.opened .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
opacity: 0;
}
.circle-plus {
height: 4em;
width: 4em;
font-size: 1em;
opacity: 0.7;
}
.circle-plus .circle {
position: relative;
width: 2.55em;
height: 2.5em;
}
.circle-plus .circle .horizontal {
position: absolute;
background-color: red;
width: 30px;
height: 5px;
left: 50%;
margin-left: -15px;
top: 50%;
margin-top: -2.5px;
}
.circle-plus .circle .vertical {
position: absolute;
background-color: red;
width: 5px;
height: 30px;
left: 50%;
margin-left: -2.5px;
top: 50%;
margin-top: -15px;
}
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity,filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover .hamburger-inner::after {
background: lightgrey;
}
.hamburger:hover .hamburger-inner::before {
background: lightgrey;
}
.hamburger:hover .hamburger-inner {
background: lightgrey;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55,0.055,0.675,0.19);
}
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333,0.66667,1),opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333,transform 0.13s cubic-bezier(0.55,0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0,-10px,0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215,0.61,0.355,1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333,0.33333),opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333,transform 0.13s 0.25s cubic-bezier(0.215,1);
}
.header--is-active {
display: flex;
}