自定义CSS导航下拉列表

Question

目前在我的网站上，当我的链接太多时，链接会落在导航下方。请参阅我的示例：https://jsfiddle.net/cn6z13n1/

是否有可能在最右边有一个More Links列表项，其下拉列表中包含链接？

.toolkit_nav {
    background:#dfdfdf;
    width:100%;
    height:40px;
    padding:0;
}
.toolkit_nav ul {
    margin:0;
}
.toolkit_nav ul .page_item {
    display:inline-block;
    line-height:40px;
    list-style-type:none;
    margin:0px;
    padding:0 20px;
}
.toolkit_nav ul .page_item:first-child {
    margin-left:0;
    padding-left:0;
}
.page_item:hover, .current_page_item {
    background:grey;
}
.page_item a {
    color:black;
    font-size: 0.9em;
    font-weight: 400;
    text-decoration:none;
}

<nav class="toolkit_nav">
   <div class="row">
      <div class="medium-12 columns">
         <ul>
            <li class="page_item page-item-1035 current_page_item"><a href="/introduction/">Introduction</a></li>
            <li class="page_item page-item-1039"><a href="/digital-landscapes/">Digital Landscapes</a></li>
            <li class="page_item page-item-1039"><a href="/digital-landscapes/">Link 4</a></li>
            <li class="page_item page-item-1039"><a href="/digital-landscapes/">Link 3</a></li>
            <li class="page_item page-item-1039"><a href="/digital-landscapes/">Link 2</a></li>
            <li class="page_item page-item-1039"><a href="/digital-landscapes/">Link 1</a></li>
            <li class="page_item page-item-1039"><a href="/digital-landscapes/">Link 5</a></li>
         </ul>
      </div>
   </div>
</nav>

Answer 1

你需要在js中这样做我建议像这样

1. 获取行的宽度（导航的最大宽度）
2. 循环遍历li元素并总结那里的宽度（+记住添加＆＃34的宽度;更多＆＃34;元素
3. 当宽度总和> nav元素的宽度隐藏元素
4. 将js添加到您的＆＃34;更多＆＃34;显示隐藏元素的按钮

以下代码未经过测试，但应该给您一个想法：

var maxWidth = $('#nav').width();
var moreWidth = $('#more').width(); // li "more" element

var sumWidth = moreWidth;
$('#nav li').each(function() {
    sumWidth += $(this).width();
    if(sumWidth > maxWidth) {
       $(this).addClass('hide'); // add css for hide class
    }
});

$('#more').on('click', function() {
   $('#nav .hide').fadeIn(100);
   // You will need more code here to place it correctly, maybe append the elements in an container
});

这是一个小提琴的例子：

https://jsfiddle.net/cn6z13n1/3/

注意：这只是一个粗略的草稿，你可能会使用钙填充等来使这项工作变得更好

编辑：使用$（window）.resize（）函数

更新示例

https://jsfiddle.net/cn6z13n1/6/

Answer 2

您需要稍微更改HTML，但这样可以。

        .toolkit_nav {
          background: #dfdfdf;
          width: 100%;
          height: 40px;
          padding: 0;
        }
        .toolkit_nav ul {
          margin: 0;
        }
        .toolkit_nav ul .page_item {
          display: inline-block;
          line-height: 40px;
          list-style-type: none;
          margin: 0px;
          padding: 0 20px;
        }
        .toolkit_nav ul .page_item:first-child {
          margin-left: 0;
          padding-left: 0;
        }
        .page_item:hover,
        .current_page_item {
          background: grey;
        }
        .page_item a {
          color: black;
          font-size: 0.9em;
          font-weight: 400;
          text-decoration: none;
        }
        /* NEW STUFF */
        .sub-nav,
        .sub-nav li {
          box-sizing: border-box;
        }
        .more {
          position: relative;
        }
        .more>ul {
          display: none;
          position: absolute;
          left: 0;
          top: 100%;
          padding: 0
        }
        .more:hover>ul {
          display: block;
        }
        .more>ul>li {
          display: block;
          width: 100%;
          clear: both;
          text-align: center;
        }
        .toolkit_nav ul.sub-nav .page_item:first-child {
          padding: 0 20px;
        }

<nav class="toolkit_nav">

  <div class="row">
    <div class="medium-12 columns">

      <ul>
        <li class="page_item page-item-1035 current_page_item"><a href="/introduction/">Introduction</a>
        </li>
        <li class="page_item page-item-1039"><a href="/digital-landscapes/">Digital Landscapes</a>
        </li>
        <li class="page_item page-item-1039"><a href="/digital-landscapes/">Link 4</a>
        </li>
        <li class="page_item page-item-1039"><a href="/digital-landscapes/">Link 3</a>
        </li>
        <li class="page_item page-item-1039"><a href="/digital-landscapes/">Link 2</a>
        </li>
        <li class="page_item page-item-1039 more"><a href="/digital-landscapes/">More...</a>
          <ul class="sub-nav">
            <li class="page_item page-item-1039"><a href="/digital-landscapes/">Link 1</a>
            </li>
            <li class="page_item page-item-1039"><a href="/digital-landscapes/">Link 5</a>
            </li>
          </ul>
        </li>
      </ul>

    </div>
  </div>

</nav>