竖向菜单栏-按钮切换与动画显示菜单项

最新推荐文章于 2024-11-12 22:56:44 发布

codingFunTime

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量152

点赞数

分类专栏：前端动画文章标签： css css3 html

原文链接：https://codepen.io/cheng-shuai/pen/PoWPBwm

版权

前端动画专栏收录该内容

23 篇文章 2 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <input type="checkbox" id="toggler">

    <label for="toggler">
      <span class="hambuger-container">
        <span></span>
        <span></span>
      </span>
    </label>

    <div class="nav-items">
      <ul>
        <li>Home</li>
        <li>iPhone</li>
        <li>iPad</li>
        <li>Mac</li>
        <li>TV</li>
      </ul>
    </div>
  </header>
</body>

</html>

css


#toggler {
  display: none;
}

.hambuger-container {
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 18px;
}

.hambuger-container span {
  display: block;
  height: 1px;
  background-color: #fff;
  position: relative;
  transition: transform .3s ease-in-out, top .3s ease-in-out .3s;
  top: 0;
}

.hambuger-container span:nth-child(2) {
  margin-top: 7px;
}

#toggler:checked + label .hambuger-container span:nth-child(1) {
  transform: rotate(45deg);
  top: 4px;
  transition: top .3s ease-in-out, transform .3s ease-in-out .3s;
}

#toggler:checked + label .hambuger-container span:nth-child(2) {
  transform: rotate(-45deg);
  top: -4px;
  transition: top .3s ease-in-out, transform .3s ease-in-out .3s;
}

header {
  height: 44px;
  background-color: #000;
  padding: 0 18px;
}

body {
  padding: 0;
  margin: 0;
}

.nav-items {
  background-color: rgba(0, 0, 0, .82);
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 44px;
  left: 0;
  transform: scaleY(0);
  transition: all .4s ease-in-out;
  transform-origin: 50% 0;
  /* opacity: 0; */
}

#toggler:checked ~ .nav-items {
  
  transform: scaleY(1);
  /* opacity: 1; */
}

ul {
  margin-top: 1em;
}

ul li {
  color: #fff;
}