html - 使用 Flexbox 的响应式导航菜单

Question

我试图使用 flexbox 构建响应式 nav。当屏幕小于 744 像素时，我希望出现一个切换按钮，主导航的 max-height 为 0，然后在单击时，导航显示在 block 中。相当典型的东西。

但是，我习惯于只使用 float 来执行此操作，但我遇到了几个问题:

1. 我不明白如何在不插入导航 Logo 并向上切换的情况下将 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 来切换菜单。

希望对您有所帮助:-)