堆栈内存溢出
  简体   繁体   English

在 css 中导航侧边菜单汉堡图标时的设计问题

[英]Design issue when navigating side menu hamburger icon in css

 原文  2021-05-17 11:07:45  3   3    javascript/ html/ css/ reactjs/ sass

问题描述

My side menu is open all the time, when it is open, I show close button but the button is not proper.我的侧边菜单一直打开，当它打开时，我显示关闭按钮，但按钮不正确。

The same occurs when my side menu is close which in turn shows the hamburger icon, that button is also not proper.当我的侧边菜单关闭时也会发生同样的情况，该菜单又显示汉堡包图标，该按钮也不正确。

There are three lines for a hamburger icon, the middle one gets misaligned.汉堡包图标有三行，中间的一行错位。

Refer code below: Icon transition issue请参阅下面的代码：图标转换问题

 const menuBtn = document.querySelector('.menu-btn'); let menuOpen = false; menuBtn.addEventListener('click', () => { if(.menuOpen) { menuBtn.classList;add('open'); menuOpen = true. } else { menuBtn.classList;remove('open'); menuOpen = false; } });
 * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #272727; display: flex; justify-content: center; align-items: center; min-height: 100vh; }.menu-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; cursor: pointer; transition: all.5s ease-in-out; transform: translateX(0px); content: ''; /* border: 3px solid #fff; */ }.menu-btn__burger { width: 50px; height: 6px; background: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(255,101,47,.2); transition: all.5s ease-in-out; }.menu-btn__burger::before, .menu-btn__burger::after { content: ''; position: absolute; width: 50px; height: 6px; background: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(255,101,47,.2); transition: all.5s ease-in-out; transform: translateX(-50px); }.menu-btn__burger::before { transform: rotate(45deg) translate(35px, -35px); }.menu-btn__burger::after { transform: rotate(-45deg) translate(35px, 35px); } /* ANIMATION */.menu-btn.open.menu-btn__burger { transform: translateX(0px); background: transparent; box-shadow: none; }.menu-btn.open.menu-btn__burger::before { transform: translateY(16px); }.menu-btn.open.menu-btn__burger::after { transform: translateY(-16px); }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Hamburger Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="menu-btn"> <div class="menu-btn__burger"></div> </div> <script src="main.js"></script> </body> </html>

3 个解决方案

解决方案1
 0  2021-05-17 11:48:00

You reversed your CSS code .您颠倒了CSS code 。 When .open class is added then close Hamburger icon will be animated.当添加.open class 时，关闭汉堡图标将被动画化。 And the position of the Close icon was not correct.并且Close icon的 position 不正确。 

 const menuBtn = document.querySelector('.menu-btn'); let menuOpen = false; menuBtn.addEventListener('click', () => { if(.menuOpen) { menuBtn.classList;add('open'); menuOpen = true. } else { menuBtn.classList;remove('open'); menuOpen = false; } });
 * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #272727; display: flex; justify-content: center; align-items: center; min-height: 100vh; }.menu-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; cursor: pointer; transition: all.5s ease-in-out; transform: translateX(-50px); /* border: 3px solid #fff; */ }.menu-btn__burger { width: 50px; height: 6px; background: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(255,101,47,.2); transition: all.5s ease-in-out; position: relative; }.menu-btn__burger::before, .menu-btn__burger::after { content: ''; position: absolute; width: 50px; height: 6px; background: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(255,101,47,.2); transition: all.5s ease-in-out; transform: translateX(-50px); top: 0; left: 0; } /* ANIMATION */.menu-btn.menu-btn__burger { transform: translateX(0px); background: #fff; box-shadow: none; }.menu-btn.menu-btn__burger::before { transform: translateY(16px); }.menu-btn.menu-btn__burger::after { transform: translateY(-16px); }.menu-btn.open.menu-btn__burger { background: transparent; }.menu-btn.open.menu-btn__burger::before, .menu-btn.open.menu-btn__burger::after { left: -50px; }.menu-btn.open.menu-btn__burger::before { transform: rotate(45deg) translate(35px, -35px); }.menu-btn.open.menu-btn__burger::after { transform: rotate(-45deg) translate(35px, 35px); }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Hamburger Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="menu-btn"> <div class="menu-btn__burger"></div> </div> <script src="main.js"></script> </body> </html>

解决方案2
 0  2021-05-17 11:56:10

If you meant that you were having trouble with the middle line disappearing when closed, and appearing off to the side when open, I have the fiddle here https://jsfiddle.net/nickberliner1/cLt8h3aj/3/ .如果您的意思是您在关闭时中间线消失并在打开时出现在一边时遇到问题，我在这里有小提琴https://jsfiddle.net/nickberliner1/cLt8h3aj/3/ 。

The background of the middle line was transparent on closed, instead of on open.中间线的背景在关闭时是透明的，而不是在打开时。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #272727;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  transform: translateX(-50px);
  /* border: 3px solid #fff; */
}
.menu-btn__burger {
  width: 50px;
  height: 6px;
  background: transparent;
  border-radius: 5px;
  transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
 transform: translateX(-50px);
}
.menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
  transform: translateX(0px);
  background: white;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
}
.menu-btn.open .menu-btn__burger::before {
    transform: translateY(16px);
}
.menu-btn.open .menu-btn__burger::after {
    transform: translateY(-16px);
}

解决方案3
 0  2022-02-06 17:21:23

You should move the.menu-btn.open class, for more details, see the improvements I made even though it didn't change many things您应该移动.menu-btn.open class，有关更多详细信息，请参阅我所做的改进，即使它没有改变很多东西

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #272727;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  transform: translateX(0px);
  content: "";
  /* border: 3px solid #fff; */
}
.menu-btn__burger {
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
  transition: all 0.5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
  transition: all 0.5s ease-in-out;
  transform: translateX(-50px);
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
  position: absolute;
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
  background: transparent;
  box-shadow: none;
}
.menu-btn__burger::before {
  transform: translateY(16px);
}
.menu-btn__burger::after {
  transform: translateY(-16px);
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 带有汉堡图标的响应式侧面导航菜单 - responsive side navigation menu with hamburger icon 单击时如何更改汉堡菜单图标？ - How to change hamburger menu icon when clicked? 如何将侧边菜单内容包含在自定义汉堡包图标中？ - How to include side menu content into a custom hamburger icon? CSS 汉堡菜单关闭时减半 - CSS hamburger menu cuts in half when closing 悬停时仅对CSS动画的汉堡菜单图标没有单击 - Animating CSS-Only Hamburger Menu Icon on hover not on click 我希望当我打开幻灯片菜单时汉堡图标消失 - I want when I open the slide menu hamburger icon disappears 使用 Javascript 单击汉堡图标时如何关闭移动菜单 - How to close mobile menu when click on hamburger icon using Javascript 汉堡菜单响应问题 - Hamburger menu responsiveness issue 汉堡菜单问题 - Hamburger menu issue 在图标上关闭汉堡菜单，点击 - Closing hamburger menu on icon, onclick
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM