单击关闭纯CSS汉堡包菜单

时间：2020-02-10 17:05:45

标签： css menu dropdown

我在下面的汉堡菜单中添加了代码。单击特定部分后，我想关闭菜单。

例如，如果您单击“联系人”部分菜单，则应将菜单隐藏并移动到页面上的“联系人”部分。我浪费了大约一个小时，但真的不知道如何解决它，菜单仍然出现在屏幕上。

/* CORE STYLES */
:root {
  --primary-color: rgba(13, 110, 139, 0.75);
  --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(--primary-color);
  color: #fff;
  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: 50px;
  height: 50px;
  opacity: 0;
}

.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: 1rem;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hamburger Line */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 2px;
  background: inherit;
}

/* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 10px;
}

/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}

/* 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: 1rem;
}

.menu-wrap .menu > div > div > ul > li > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
}
<!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">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/menu.css">
  <title>Hamburger Menu Overlay</title>
</head>
<body>
  <div class="menu-wrap">
    <input type="checkbox" class="toggler">
    <div class="hamburger"><div></div></div>
    <div class="menu">
      <div>
        <div>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <header class="showcase">
    <div class="container showcase-inner">
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas maiores sint impedit delectus quam molestiae explicabo cum facere ratione veritatis.</p>
      <a href="#" class="btn">Read More</a>
    </div>
  </header>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

如果您想在单击链接时取消选中它（选择单击输入或链接），则可以使用:checked来代替:focus，而可以使用/* CORE STYLES */ :root { --primary-color: rgba(13, 110, 139, 0.75); --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(--primary-color); color: #fff; 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: 50px; height: 50px; opacity: 0; } .menu-wrap .hamburger { position: absolute; top: 0; left: 0; z-index: 1; width: 60px; height: 60px; padding: 1rem; background: var(--primary-color); display: flex; align-items: center; justify-content: center; } /* Hamburger Line */ .menu-wrap .hamburger>div { position: relative; flex: none; width: 100%; height: 2px; background: #fff; display: flex; align-items: center; justify-content: center; transition: all 0.4s 0.4s ease; } /* Hamburger Lines - Top & Bottom */ .menu-wrap .hamburger>div::before, .menu-wrap .hamburger>div::after { content: ""; position: absolute; z-index: 1; top: -10px; width: 100%; height: 2px; background: inherit; } /* Moves Line Down */ .menu-wrap .hamburger>div::after { top: 10px; } /* Toggler Animation */ .menu-wrap .hamburger:focus>div { transform: rotate(135deg); } /* Turns Lines Into X */ .menu-wrap .hamburger:focus>div:before, .menu-wrap .hamburger:focus>div:after { top: 0; transform: rotate(90deg); } /* Rotate On Hover When Checked */ .menu-wrap .hamburger:focus>div { transform: rotate(225deg); } /* Show Menu */ .menu-wrap .hamburger:focus~.menu { visibility: visible; } .menu-wrap .hamburger:focus~.menu>div { transform: scale(1); transition-duration: var(--menu-speed); } .menu-wrap .hamburger:focus~.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: 1rem; } .menu-wrap .menu>div>div>ul>li>a { color: inherit; text-decoration: none; transition: color 0.4s ease; } /* whatever only for the demo */ div.boxe { height: 100vh; width: 100vw; position: fixed; top: 100vh; left: 0; transition: 0.5s; z-index: 10; display:flex; align-items:center; justify-content:space-around; font-size: 5vmax } div.boxe:target { top: 0; background: rgba(13, 110, 139, 1); }容易在其他任何地方单击丢失。

可能的示例

<div class="menu-wrap">
  <!--<input type="checkbox" class="toggler">  removed for a tabindex attribute -->
  <div tabindex="0" class="hamburger">
    <!-- give it a tabindex to make it clikable and be focused -->
    <div></div>
  </div>
  <div class="menu">
    <div>
      <div>
        <ul>
          <li><a href="#aa">Home</a></li>
          <li><a href="#bb">About</a></li>
          <li><a href="#cc">Services</a></li>
          <li><a href="#dd">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

 
<header class="showcase">
  <div class="container showcase-inner">
    <h1>Welcome</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas maiores sint impedit delectus quam molestiae explicabo cum facere ratione veritatis.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</header>


<!-- whatever, just for a demo -->

<div id="aa" class="boxe"><a href="#">top</a>box A</div>
<div id="bb" class="boxe"><a href="#">top</a>box B</div>
<div id="cc" class="boxe"><a href="#">top</a>box C</div>
<div id="dd" class="boxe"><a href="#">top</a>box D</div>
{{1}}

相关问题
最新问题