创建按钮，然后对桌面用户隐藏按钮并显示完整的导航。使用@media，您可以对移动设备显示按钮并隐藏导航项。
当用户单击按钮或将其悬停时，他们将获得导航项。
超文本：

<button class='menu-button0'>Click me</button>
    <div id='showMe'>link1, link2, link3</div>

CSS，当移动设备访问您的页面：

#showMe(display:none;)
    .menu-button0:hover + #showMe{display:block;}

CSS，当桌面设备访问您的页面：

.menu-button0{display:none;}

找到了这个，而且工作起来很有魅力。对于任何试图实现响应/渐进菜单的人来说，试试吧。
http://jsfiddle.net/abhitalks/860LzgLL/

var elemWidth, fitCount, fixedWidth = 120,  
    $menu = $("ul#menu"), $collectedSet;
collect();
$(window).resize(collect);

function collect() {
    elemWidth = $menu.width();
    fitCount = Math.floor(elemWidth / fixedWidth) - 1;
    $collectedSet = $menu.children(":gt(" + fitCount + ")");
    $("#submenu").empty().append($collectedSet.clone());    
}

我使用了StefanB的变体，因为它允许我通过简单地检查项目右坐标是否与“菜单”空间重叠来更多地处理项目的宽度......：

function collect() {
    $menu.children().css({"display": "block", "width": "auto"});

    var elemLeft= $menu.offset().left + $menu.outerWidth();
    $allElements = $menu.children();
    $collectedSet = $allElements.filter(function() {
        var right = $(this).offset().left + $(this).outerWidth();
        return (right + 40) > elemLeft;
    });

    $("#submenu").empty().append($collectedSet.clone());
    $collectedSet.css({"display": "none", "width": "0"});
}

或者，如果将事件附加到li选项，则需要触发这些事件（在克隆期间可能已丢失/未克隆）

function collect() {
  $menu.children().css({"display": "block", "width": "auto"});

  $allElements = $menu.children();
  $allElements.each(function(index) {
      $(this).attr("data-original-index", index);
  });

  var menuRight= parseInt($menu.offset().left + $menu.outerWidth());
  $allElements = $menu.children();
  var show=true;
  $collectedSet = $allElements.filter(function() {
      var right = parseInt($(this).offset().left + $(this).outerWidth() + 140) ;
      if ( right > menuRight ) show=false;
      return !show;
  });

  $clonedElements = $collectedSet.clone();
  // Handle events attached to the original set but clicked on from the more-menu set....
  $clonedElements.on("click", function() {
      var originalIndex = $(this).data("original-index");
      var menuItems = document.querySelectorAll("#menu > li");
      menuItems[originalIndex].click();
  });

  $("#submenu").empty().append($clonedElements);
  $collectedSet.css({
      "display": "none",
      "width": "0"
  });
}

有关运行示例，请参见http://jsfiddle.net/Abeeee/zx1rmgwq/53/