使用Flexbox的響應式導航菜單

Question

我試圖使用flexbox構建響應nav。當屏幕小於744像素時，我想要一個切換按鈕出現，主導航的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

我知道這可能是有點晚了您的特定需求，但你可能想通過克里斯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來切換菜單。

希望它有幫助:-)