棘手的响应式水平菜单栏

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