如何解决灵活的汉堡菜单,过渡不能同时使用宽度和顶部 ? Check it in action on Codepen
我正在尝试创建一个汉堡菜单,但我似乎无法让 width
和 top
/ bottom
同时工作
这是我的代码:
function disp_menu() {
var lines = document.querySelectorAll("#hamburger span");
if (lines[0].className == "") {
lines[0].className = "topHamline";
lines[3].className = "bottomHamline";
lines[1].className = "midtopHamline";
lines[2].className = "midbottomHamline";
} else
[].forEach.call(lines,function(l) {
l.className = "";
});
}
:root {
--hamline-height: 0.5rem;
--ham-width: 4rem;
--ham-gap: 2rem;
--hamline-border: 1rem;
}
body {
background-color: red;
}
#hamburger {
height: auto;
width: var(--ham-width);
position: relative;
cursor: pointer;
}
#hamburger span {
margin: auto;
display: block;
position: relative;
width: 100%;
height: var(--hamline-height);
background-color: black;
margin-bottom: var(--ham-gap);
border-radius: var(--hamline-border);
transition: all 0.25s ease-in-out;
}
#hamburger span:nth-child(2) {
transition: all 0.25s;
position: absolute;
}
#hamburger span:nth-child(1) {
top: 0;
}
#hamburger span:nth-child(4) {
bottom: 0;
}
.topHamline {
top: 50% !important;
width: 0 !important;
transition: all 0.25s !important;
}
.bottomHamline {
bottom: 50% !important;
width: 0 !important;
transition: all 0.25s !important;
}
.midtopHamline {
transform: rotate(-45deg);
transition: all 0.25s !important;
}
.midbottomHamline {
transform: rotate(45deg);
transition: all 0.25s !important;
}
<div id="hamburger" onclick="disp_menu()">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
我到底错过了什么?
编辑
我需要顶线和底线过渡到中间,同时减小宽度
解决方法
您需要分别translateY
第一个和第三个跨度2rem
和-2rem
,以便它们到达中心。
.topHamline {
transform: translateY(var(--ham-gap));
width: 0 !important;
transition: all 0.25s !important;
}
.bottomHamline {
transform: translateY(calc(var(--ham-gap) * -1));
width: 0 !important;
transition: all 0.25s !important;
}
在下面检查它:
function show_menu() {
var lines = document.querySelectorAll("#hamburger span");
if (lines[0].className == "") {
lines[0].className = "topHamline";
lines[3].className = "bottomHamline";
lines[1].className = "midtopHamline";
lines[2].className = "midbottomHamline";
} else
[].forEach.call(lines,function(l) {
l.className = "";
});
}
:root {
--ham-width: 4rem;
--ham-gap: 2rem;
--ham-padding: 1rem;
--hamline-height: 0.5rem;
--hamline-border: 1rem;
}
body {
background-color: #111;
}
#hamburger {
height: auto;
width: var(--ham-width);
position: relative;
cursor: pointer;
padding: var(--ham-padding);
}
#hamburger span {
margin: auto;
display: block;
position: relative;
width: 100%;
height: var(--hamline-height);
background-color: white;
margin-bottom: var(--ham-gap);
border-radius: var(--hamline-border);
transition: transform 0.25s,width 0.25s ease-in-out;
}
#hamburger span:nth-child(2) {
width: var(--ham-width);
position: absolute;
}
#hamburger span:nth-child(1) {
top: 0;
}
#hamburger span:nth-child(4) {
bottom: 0;
}
.topHamline {
transform: translateY(calc(var(--ham-gap) + var(--hamline-height)));
width: 0 !important;
transition: transform 0.25s,width 0.25s !important;
}
.bottomHamline {
transform: translateY(calc(var(--ham-gap) * -1 + var(--hamline-height) * -1));
width: 0 !important;
transition: transform 0.25s,width 0.25s !important;
}
.midtopHamline {
transform: rotate(-45deg);
transition: transform 0.25s !important;
}
.midbottomHamline {
transform: rotate(45deg);
transition: transform 0.25s !important;
}
<div id="hamburger" onclick="show_menu()">
<span></span>
<span></span>
<span></span>
<span></span>
</div>