如何解决五行汉堡，纯CSS
我试图使用纯css和div这样创建五行“汉堡包”（更像是三层汉堡包）菜单，但使用五行而不是三行：
（除非您有完整的代码，否则我真的不想更改此方法。否则，请坚持使用div。谢谢！）
EDIT1：注意ibm.com有一个四行汉堡。我要5行。有什么建议吗？
/* CORE STYLES */
:root {
--primary-color: rgba(255,255,0.75);
--secondary-color: rgba(112,48,160) --overlay-color: rgba(24,39,51,0.85);
--menu-speed: 0.75s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto',sans-serif;
line-height: 1.4;
}
.container {
max-width: 960px;
margin: auto;
overflow: hidden;
padding: 0 3rem;
}
.showcase {
background: var(--primary-color);
color: #fff;
height: 100vh;
position: relative;
}
.showcase:before {
content: '';
/* background: url('https://images.pexels.com/photos/533923/pexels-photo-533923.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center center/cover;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.showcase .showcase-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
.showcase h1 {
font-size: 4rem;
}
.showcase p {
font-size: 1.3rem;
}
.btn {
display: inline-block;
border: none;
background: var(--secondary-color);
color: black;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
transition: opacity 1s ease-in-out;
text-decoration: none;
}
.btn:hover {
opacity: 0.7;
}
/* MENU STYLES */
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 100px;
/* was 50px */
height: 100px;
/* was 50px */
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
/* orginal 60px */
height: 60px;
/* orginal 60px */
padding: 1rem;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Lines - Top */
.menu-wrap .hamburger>div::before {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: red;
}
/* Hamburger Lines - Middle */
.menu-wrap .hamburger>div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: purple;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/*Hamburger Lines - Bottom*/
.menu-wrap .hamburger>div::after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: green;
}
/* Moves Line Down */
.menu-wrap .hamburger>div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked+.hamburger>div {
transform: rotate(135deg);
background: black;
}
/* Turns Lines Into X */
.menu-wrap .toggler:checked+.hamburger>div:before,.menu-wrap .toggler:checked+.hamburger>div:after {
top: 0;
transform: rotate(90deg);
background: black;
}
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover+.hamburger>div {
transform: rotate(225deg);
}
/* Show Menu */
.menu-wrap .toggler:checked~.menu {
visibility: visible;
}
.menu-wrap .toggler:checked~.menu>div {
transform: scale(1);
transition-duration: var(--menu-speed);
}
.menu-wrap .toggler:checked~.menu>div>div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu>div {
background: var(--overlay-color);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
.menu-wrap .menu>div>div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
.menu-wrap .menu>div>div>ul>li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 0.25rem;
}
.menu-wrap .menu>div>div>ul>li>a {
color: inherit;
text-decoration: none;
transition: color 0.4s ease;
}<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>
<a href="Index.html">Home</a>
</li>
<li>
<a href="Team.html">Team</a>
</li>
<li>
<a href="AboutUs.html">About Us</a>
</li>
<li>
<a href="Definitions.html">Definitions</a>
</li>
<li>
<a href="HaveDoubts.html">Have Doubts?</a>
</li>
<li>
<a href="ContactUs.html">Contact Us</a>
</li>
<li>
<a href="DonateToday.html">Donate Today</a>
</li>
<li>
<a href="GetInvolved.html">Get Involved</a>
</li>
<li>
<a href="TheMovement.html">The Movement</a>
</li>
<li>
<a href="c11.html">c11</a>
</li>
<li>
<a href="TheCeosStory.html">The CEO's Story</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<img src="/images/CII_Logo.PNG" class="img_logo_big" style="width: 50%;display: block;margin-left: auto;margin-right: auto;" />
<header class="showcase">
<div class="container showcase-inner">
<h1 style="font-size:30px; color: black;">We know how to fund the "unicorn" and tame the "machine" whilst compelling people to change how they think,work,and have fun. Truly.</h1>
<p></p>
<p style="font-style: italic; font-size:15px; color: gray">Optimizing change for the benefit of all.</p>
<a href="#" class="btn">Read More</a>
</div>
</header>我尝试了before和after以外的其他伪选择器，并尝试修改伪选择器。我还尝试添加更多div，甚至更多。我还尝试查找其他伪选择器，但它们似乎都没有至少4个状态。例如：before和after只是两个状态，因此像普通汉堡包菜单一样，它仅在顶部和底部放置一行，共3行。我希望5条线与徽标中的颜色相匹配（请参阅个人资料图片）。
是的，我知道5行汉堡菜单是非标准的事实……这就是重点。这是关于营销的。
注意：这个问题以前发布过，但是我找不到了。
EDIT2：由于网站的内容和主题，网络安全非常重要。如果可能的话，我尝试不向我的网站介绍脚本，因此仅使用CSS解决方案。但是，如果其他类型的解决方案根本没有引入漏洞，请发布答案。谢谢！
EDIT3：我以许多不同的方式搜索有无hamburger-menu的SO。不知道如何使这个问题更加“充分研究”。欢迎在评论中提出建议和反馈。
解决方法
创建汉堡包应该与您选择的行数相同。
我只需为每行创建一个div就可以解决这个问题。
因此html代码如下所示：
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
如您所见，我为每个div赋予了线的类别，该类别将用于为每行赋予css中的样式。
实际创建可见线的css如下所示：
.line {
width: 65px;
height: 5px;
background: black;
border-radius: 8px;
margin: 8px;
}
这定义了每条线的样式，并使用margin属性控制线之间的距离（取决于位置或您可能希望将其拆分为特定边的其他因素）。
如果您希望每行具有不同的颜色，则可以为每行添加另一个类。
例如
<div class="line one"></div>
<div class="line two"></div>
<!-- and so on... -->
这也使您可以继续旋转每一行，就像我看到要使用transform那样。
为此，您可以在单击汉堡包后使用javascript在行中添加“打开”类。这样，您可以向其中一些添加display: none，然后让其中两个变换成一个X。
希望我能帮到你
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
