Question

我正在尝试使用也具有动画效果的Pure CSS创建响应式导航栏。该代码背后的思想和主要设计来自youtube上的“ FollowAndrew”，他通过他撰写了两本不同的教程，其中一本使用纯CSS动画制作，但不使用flexbox动画，而另一本使用flexbox制作，但需要使用JavaScript。我设法使导航栏具有一定的响应能力并为汉堡菜单图标设置动画，但是当设法将导航栏顶部的导航栏自身滑入和滑出菜单时，我没有设法找到一种方法。手机或平板电脑的屏幕尺寸。 您能告诉我我做错了什么吗？毫无疑问，由于我是Web开发的新手，因此我做了一些相当麻烦的事情来使它起作用，如果您也有如何更好地编写此代码的提示，我很想听听他们，因为我想成为一个更好的Web设计师，而不是仅仅做获得该要求的工作工作。我选择使用flexbox的原因是因为使用box方法时无法使图像正确居中。

提前谢谢！

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #bbb;
}

.mainNav {
  background-color: white;
  padding: 5px 20px;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}

.mainNavItm .logo {
  float: left;
}

.mainNavMenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}

.mainNavMenu li {
  font-size: 16px;
  padding: 15px 5px;
}

.mainNavMenuChoices {
  max-height: 0;
}

.mainNavMenu li a {
  text-decoration: none;
  color: #363636;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  display: block;
}

.mainNavMenu li a:hover {
  color: gray;
}

.sprtdNavItm {
  border-bottom: 1px gray solid;
}


/* Mobile */

.mainNavMenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.mainNavItm {
  order: 2;
  width: 100%;
  display: block;
  /*none when hidden block when visible */
}

.navMenuBtn {
    display: none;
}

.navMenuIcn {
  order: 1;
  cursor: pointer;
}

.navIcn {
  background: #363636;
  display: inline-block;
  height: 2px;
  position: relative;
  transition: all 0.2s ease-out;
  width: 18px;
}

.navIcn::before,
.navIcn::after {
  background: #363636;
  content: "";
  display: inline-block;
  position: absolute;
  transition: all 0.2s ease-out;
  height: 2px;
  width: 18px;
}

.navIcn::before {
  top: 5px;
}

.navIcn::after {
  top: -5px;
}

.mainNav .navMenuBtn:checked~.mainNavMenuChoices {
  max-height: 340px;
}

.mainNav .navMenuBtn:checked~.navMenuIcn .navIcn {
  background-color: transparent;
}

.mainNav .navMenuBtn:checked~.navMenuIcn .navIcn::before {
  transform: rotate(-45deg);
  top: 0;
}

.mainNav .navMenuBtn:checked~.navMenuIcn .navIcn::after {
  transform: rotate(45deg);
  top: 0;
}


/* Tablet  */

@media all and (min-width: 767px) {
  .logo {
    flex: 1;
  }
}


/* Desktop */

@media all and (min-width: 979px) {
  .mainNavItm {
    display: block;
    width: auto;
  }
  .navMenuIcn {
    display: none;
  }
  .logo {
    order: 0;
  }
  .navMenuIcn {
    order: 1;
  }
  .mainNavMenuChoices {
    order: 2;
  }
  .sprtdNavItm {
    border: 0;
  }
  .mainNavMenu li {
    padding: 15px 10px;
  }
}


/* Large Desktop */

@media (min-width: 1200px) {
  /*To be determined*/
}

<nav class="mainNav">
  <ul class="mainNavMenu">
    <li>
      <a class="logo" href="https://example.com/"><img src="/assets/logo.png" alt="Company Name" height="30"></a>
    </li>
    <li>
      <input class="navMenuBtn" type="checkbox" id="navMenuBtn">
      <label class="navMenuIcn" for="navMenuBtn"><span class="navIcn"></span></label>
      <div class="mainNavMenuChoices">
        <li class="mainNavItm sprtdNavItm"><a href="https://example.com/">Home</a></li>
        <li class="mainNavItm sprtdNavItm"><a href="https://example.com/products/">Products</a></li>
        <li class="mainNavItm sprtdNavItm"><a href="https://example.com/services/">Services</a></li>
        <li class="mainNavItm sprtdNavItm"><a href="https://example.com/about-us/">About Us</a></li>
        <li class="mainNavItm"><a href="https://example.com/contact-us/">Contact Us</a></li>
      </div>
    </li>
  </ul>
</nav>

带有Flexbox的纯CSS自适应导航栏

0 个答案: