水平堆叠图标并做出响应

奥利弗，

这是一个广泛的问题，因为有几种方法可以解决此问题。我确定那里有一两个图书馆可以帮助您完成此任务。如果您打算自己做，则将要开始以下任务。

1. 检测您的屏幕尺寸何时更改。这可以使用计时器或使用window.onresize事件来完成。
2. 屏幕大小更改后，您将需要检查按钮元素及其包装，以确定哪些元素不再出现在屏幕上。
3. 最后，您将需要将这些溢出元素移至辅助导航菜单。

为了帮助您入门，我整理了一个使用jQuery完成此任务的简单示例。有关完整的工作示例，请参见本文底部的JSFiddle。

$(document).ready(function() {
    // Get reference to our static elements 
    // one time at load for performance
    var $nav = $('nav');
    var $primaryList = $nav.find('.primary-list ul');
    var $overflowList = $nav.find('.overflow-list ul');
    var $overflowButton = $('#show-overflow');

    // Bind our overflow toggle for the overflow list
    $overflowButton.click(function() {
        $nav.toggleClass('show-overflow');
    });

    // Bind our resize event so we know when
    // viewport size changes
    $(window).resize(function() {
        // Find our last item in primary list
        var $pl = $primaryList.find('li:last');
        // Figure out the right side of our last element
        var x = $pl.position().left + $pl.outerWidth();
        var listWidth = $primaryList.innerWidth();
        // Check to see if this is outside of our menu
        if (x > listWidth) {
            // Since this is outside we move it to overflow
            $pl.prependTo($overflowList);
            // Show our overflow button
            $overflowButton.show();
        } else {
            // Since this didn't overflow lets see if we have enough
            // room to move an overflow element back to the primary list
            var $ol = $overflowList.find('li:first');
            // Check to see if we found an overflow element
            if ($ol.length > 0) {
                // Check to see if this one will fit
                if (x + $ol.outerWidth() <= listWidth) {
                    // Move it back to the primary list
                    $ol.appendTo($primaryList);
                }
            } else {
                // Hide our overflow button
                $overflowButton.hide();
            }
        }
    }).resize();
});

https://jsfiddle.net/gayv02gy/2/

干杯!