Question

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

然而，我习惯这样做只是浮动，我遇到了几个问题：

我不明白如何在不按下导航徽标并切换的情况下将UL放在导航栏下方;
带有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来切换菜单。

希望它有所帮助： - ）

使用Flexbox的响应式导航菜单

1 个答案: