大佬教程收集整理的这篇文章主要介绍了灵活的汉堡菜单，过渡不能同时使用宽度和顶部 ? 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>
jsfiddle
我到底错过了什么？
编辑
我需要顶线和底线过渡到中间，同时减小宽度
您需要分别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>
以上是大佬教程为你收集整理的灵活的汉堡菜单，过渡不能同时使用宽度和顶部 ? Check it in action on Codepen全部内容，希望文章能够帮你解决灵活的汉堡菜单，过渡不能同时使用宽度和顶部 ? Check it in action on Codepen所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。