时间戳

首页 > 解决方案 > 五行汉堡，纯CSS

html - 五行汉堡，纯CSS

问题描述

我正在尝试使用像这样的纯 css 和 div 创建一个五行“汉堡包”（更像是三层汉堡包）菜单，但有五行而不是三行：

（除非你有完整的代码，否则我真的不想改变方法。否则请坚持使用 div。谢谢！）

EDIT1：注意ibm.com有一个四行汉堡。我要5行。有什么建议么？

/* CORE STYLES */

 :root {
  --primary-color: rgba(255, 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&#39;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并尝试修改伪选择器。我还尝试添加更多divs，等等。我还尝试查找其他伪选择器，但它们似乎都没有至少 4 个状态。例如：before并且after只有两个状态，所以它只在顶部和底部放置一行，总共 3 行，就像普通的汉堡菜单一样。我想要 5 行来匹配我徽标中的颜色（请参阅我的个人资料图片）。

是的，我知道 5 行汉堡菜单是非标准的……这就是重点。这是关于营销的。

注意：这个问题之前发布过，但我找不到了。

EDIT2：由于网站的内容和主题，网络安全非常重要。如果可能的话，我会尽量不向我的网站引入脚本，因此只有 css 解决方案。但是，如果其他类型的解决方案根本不会引入漏洞，请发布答案。谢谢！

EDIT3：我hamburger-menu以许多不同的方式搜索了有和没有的SO。不知道如何使这个问题更“深入研究”。欢迎在评论中提出建议和反馈。

标签： htmlcssmenuhamburger-menu

解决方案

无论您选择多少行，创建一个汉堡包都应该是相同的。

我会通过简单地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 赋予了 line 类，它将用于为每一行赋予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... -->

这也将允许您继续单独旋转每一行，就像我看到您想要使用变换一样。
为此，您可以在单击汉堡后使用 javascript 在行中添加一个“open”类。这样你可以添加display: none一些，让它们中的两个转换成一个 X。

希望我能帮助你

推荐阅读