我已经对此汉堡包进行了编码:codepen,它在我的桌面上看起来很棒(对于所有屏幕尺寸)。但是,在我的手机中查看汉堡包时,单击鼠标后,线条会移到原处。这是一段视频,展示了汉堡菜单如何在手机上中断。我已经在Safari和chrome中测试了Codepen,结果相同:screen recording on mobile。继续观看视频直到结束。当您再次单击导航栏时,它将中断。这也让我感到惊讶,因为以前它在第一次点击时就中断了。我不知道为什么会发生这种奇怪的行为,所以我将不胜感激。
更清楚地说,这是单击“汉堡包”按钮时的外观:
这是它的外观:
码:
const menu = document.querySelector('.menu');
const logo = document.querySelector('.logo');
const dimmer = document.querySelector('.dimmer');
const hamburger = document.querySelector('#menu_btn');
const hamburgerLines = document.querySelectorAll('.hamburgerLine')
let addClasses = () => {
// Menu
menu.classList.add("transitionIn");
// Logo
logo.classList.add("transition");
// Dimming
dimmer.classList.add("dimmed");
// Hamburger
hamburgerLines.forEach(line => {
line.classList.add("transition");
})
}
let removeClasses = () => {
// Menu
menu.classList.remove("transitionIn");
// Logo
logo.classList.remove("transition");
// Dimming
dimmer.classList.remove("dimmed");
// Hamburger
hamburgerLines.forEach(line => {
line.classList.remove("transition");
})
}
let transitionIn = e => {
hamburger.removeEventListener('click', transitionIn)
addClasses();
hamburger.addEventListener('click', transitionOut);
}
let transitionOut = e => {
hamburger.removeEventListener('click', transitionOut);
removeClasses();
hamburger.addEventListener('click', transitionIn);
}
// Driver code
hamburger.addEventListener('click', transitionIn);
body {
margin: 0;
padding: 0;
position: relative;
height: 100vh;
width: 100vw;
background-color: pink;
}
.centerit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
header {
height: 75px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 9999999;
background-color: white;
padding: 22px 16px;
}
header div {
position: relative;
width: 100%;
height: 100%;
}
header div .logo {
height: 100%;
display: inline-block;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
-webkit-transition: fill 250ms ease-out;
transition: fill 250ms ease-out;
}
header div .transition {
fill: white;
}
header div div#menu_btn {
position: absolute;
top: 50%;
right: 0;
display: inline-block;
width: initial;
height: initial;
z-index: 1000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
overflow: visible;
}
header div div#menu_btn .menu_cont {
width: 25px;
height: 14px;
}
header div div#menu_btn .menu_cont span {
overflow: visible;
position: absolute;
left: 0;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
display: block;
height: 3px;
width: 25px;
background-color: black;
-webkit-transform-origin: right center;
transform-origin: right center;
}
header div div#menu_btn .menu_cont span.one {
top: 0;
}
header div div#menu_btn .menu_cont span.two {
bottom: 0;
}
header div div#menu_btn .menu_cont span.one.transition {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: -3.5px;
}
header div div#menu_btn .menu_cont span.two.transition {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
bottom: -3px;
}
header div div#menu_btn .menu_cont .transition {
background-color: white;
}
header .menu {
background-color: #512F07;
position: absolute;
z-index: 999;
top: -350px;
left: 0;
height: 350px;
-webkit-transition: top 500ms ease-in-out;
transition: top 500ms ease-in-out;
}
header .menu .navbar {
height: 75px;
width: 100%;
background-color: transparent;
}
header .menu .item {
height: 80px;
width: 100%;
text-align: center;
}
header .menu .item a {
vertical-align: middle;
text-decoration: none;
color: white;
}
header .transitionIn {
top: 0 !important;
}
.dimmer {
position: absolute;
display: none;
visibility: hidden;
}
div.dimmed {
background: #000;
opacity: 0.5;
position: fixed;
/* important to use fixed, not absolute */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
visibility: visible;
z-index: 10;
}
.welcome {
height: 100%;
width: 100%;
background-color: #F4F4F4;
}
.welcome h1 {
padding: 20px 16px;
color: #F43D2F;
text-align: center;
}
.sponsored {
background-color: #7A45ED;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 18px;
width: 100%;
}
.sponsored p {
white-space: pre;
text-align: center;
vertical-align: middle;
color: white;
}
.trend {
background-color: #4ED1A8;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 18px;
width: 100%;
}
.trend p {
white-space: pre;
text-align: center;
vertical-align: middle;
color: #512F07;
}
<body>
<header>
<div>
<!-- Logo -->
<a href="/">
<svg class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 190 100" style="enable-background:new 0 0 190 100;" xml:space="preserve">
<g id="Lager_1">
<g>
<rect x="45" y="20" width="10" height="60"/>
<path d="M126.2,65h27.5l6.2,15h10l-25-60h-10l-25,60h10L126.2,65z M140,32l9.6,23h-19.2L140,32z"/>
<path d="M0,0v100h190V0H0z M180,90h-80V80H90v10H10V10h80v10h10V10h80V90z"/>
</g>
</g>
<g id="Lager_2">
</g>
</svg>
</a>
<!-- Hamburger -->
<div id="menu_btn">
<div class="menu_cont">
<span class="hamburgerLine one"></span>
<span class="hamburgerLine two"></span>
</div>
</div>
</div>
<!-- Menu -->
<div class="dimmer"></div>
<div class="menu">
<div class="navbar"></div>
<div class="item centerit">
<a href="">Item 1</a>
</div>
<div class="item centerit">
<a href="">Item 1</a>
</div>
<div class="item centerit">
<a href="">Item 1</a>
</div>
</div>
</header>
</body>
最佳答案
它在Codepen中看起来绝对是螺丝钉。通过调整过渡和转换设置,我在代码笔上看起来是正确的:
header div div#menu_btn .menu_cont span {
overflow: visible;
position: absolute;
left: 0;
transition: transform 250ms ease-out; /* transform instead of all */
display: block;
height: 3px;
width: 25px;
background-color: black;
/* transform-origin: right center; */
}
header div div#menu_btn .menu_cont span.one.transition {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 6px; /* changed */
}
header div div#menu_btn .menu_cont span.two.transition {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
bottom: 5px; /* changed */
}
关于javascript - 汉堡包在移动设备上的菜单中断,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/61619681/