棘手響應水平菜單欄

Question

我有一個子導航欄，有6個項目或更多。我試圖做的是，當瀏覽器調整大小時，會根據可用空間顯示一個「更多」圖標，並且隨着視口大小的減小，下拉菜單中的每個項目都會逐個進入子菜單。

我附上了設計要求的屏幕截圖。我正在尋找一種方法來完成這個純CSS或使用媒體查詢。

任何幫助，將不勝感激。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div> 
    </nav> 

Answer 1

here是你描述的工作示例。 （它的醜陋我沒有花太多時間在造型上）

這個想法是使用媒體查詢結合第n個子選擇器來只顯示所需的元素。

<ul class="nav"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    </ul> 

    <ul id="more"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    </ul> 


    ul, li{ 
     list-style:none; 
     } 
    .nav > li{ 
     display:inline-block; 
     width:100px; 
     height:50px; 
     border:1px solid black; 
     font-size:20px; 
     text-align:center; 
     box-sizing:border-box; 
     padding-top:10px; 
     background:white; 
     margin:5px; 
     vertical-align:top; 
    } 

    .nav{ 
     background:beige; 
     padding:10px; 
     height:55px; 
     overflow:hidden; 
     whitespace:no-wrap; 
    } 

    #more { 
    display:none; 
     margin:0; 
     padding:2px; 

     width:40px; 
    position:absolute; 
     top:20px; 
     right:0; 
     border-left:4px solid black; 
     padding-top:60px; 
    } 

    #more > li{ 
     font-size:10px; 
     border:1px solid black; 
     width:100%; 
     margin:2px 0; 
    box-sizing:border-box; 
     display:none; 

    } 




    @media screen and (max-width: 700px) { 
     #more { 
      display:block; 
     } 

     #more:hover li:nth-child(6) { 
      display:block; 
     } 
    } 



    @media screen and (max-width: 600px) { 
     #more { 
      display:block; 
     } 

     #more:hover li:nth-child(5) { 
      display:block; 
     } 
    }