棘手响应水平菜单栏

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; 
     } 
    }