使用Flexbox的自适应导航菜单

Question

我正在尝试使用flexbox构建响应式nav 。 当屏幕小于744px时，我希望显示一个切换按钮，主导航的max-height为0，然后单击鼠标，将导航显示在块中。 相当典型的东西。

但是，我习惯于仅使用浮点数执行此操作，并且遇到了一些问题：

1. 我不了解如何在不按导航徽标并向上切换的情况下将UL降到导航以下。
2. 带LI的UL似乎对最大高度的技巧没有反应。

如果有人可以提供一些帮助或向我指出教程的指导，那将是很棒的。

 * { margin: 0; padding: 0; } body { font-family: 'open-sans', 'sans-serif'; font-size: 17px; color: #444; } .navText { font-size: 14px; } nav { height: 100%; width: 100%; background-color: white; } .nav-fixedWidth { //border: 1px solid; min-height: 120px; width: 960px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .mainNav { list-style: none; display: flex; } .mainNav li { margin-right: 60px; padding: 10px; //border: 1px solid; } .mainNav li:nth-child(5){ margin-right: 10px; } .mainNav li a { text-decoration: none; color: #444; display: block; } .mainNav li a:hover { color: #9d9d9d; } .logo { height: 60px; width: 60px; background-color: #ccc; } .toggle { height: 60px; width: 60px; background-color: #ccc; display: none; } @media screen and (max-width: 960px) { .nav-fixedWidth { width: 95vw; } } @media screen and (max-width: 744px) { .nav-fixedWidth { flex-wrap:wrap; } .toggle { display: block; } } 

  <nav> <div class="nav-fixedWidth"> <div class="logo"></div> <div class="toggle"></div> <ul class="mainNav"> <li class="navText"><a href="#webinars">Webinars</a></li> <li class="navText"><a href="#eBooks">e-Books</a></li> <li class="navText"><a href="#Blog">Blog</a></li> <li class="navText"><a href="#eCourse">e-Course</a></li> <li class="navText"><a href="#">Search</a></li> </ul> </div> </nav> 

Answer 1

我知道这可能对您的特定需求来说有点晚了，但是您可能想看看Chris Coiyer的这种解决方案

https://codepen.io/chriscoyier/pen/GJRXYE

html {
  background: #666;
}

body {
  width: 60%;
  margin: 0 auto;
  background: white;
}

.nav {
  position: relative;
  ul {
    display: flex;
    height: 3rem;
    overflow: hidden;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    width: 80%;
  }
  li {
    a {
      display: block;
      padding: 1rem 0.5rem;
      text-decoration: none;
      white-space: nowrap;
    }
  }
  &.open {
    ul {
      height: auto;
      display: block;
    }
  }
}
.x {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  cursor: pointer;
}

此解决方案确实需要少量JavaScript才能切换菜单。

希望能帮助到你 ：-）