javascript - 自定义 CSS 导航下拉菜单

Question

目前在我的网站上，当我有太多链接时，链接会下降到导航下方。看我的例子:https://jsfiddle.net/cn6z13n1/

是否可以在最右侧设置一个更多链接 列表项，其中包含一个包含链接的下拉列表？

.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 元素并求和那里的宽度(+ 记得在这里添加“more”元素的宽度
3. 当导航元素的宽度之和 > 宽度隐藏元素时
4. 将 js 添加到显示隐藏元素的“更多”按钮

以下代码未经测试，但应该可以给您一个思路:

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

这是你的 fiddle 的例子:

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

注意:这只是一个粗略的草稿，您可以计算填充等以使其工作良好

编辑:使用 $(window).resize() 函数更新示例

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