使溢出菜单项保存到下拉列表

Question

当窗口调整大小时，我想让我的网站顶级菜单如yplann溢出项目将隐藏并移动到下拉列表。

https://yplanapp.com/

但我不知道该怎么做。目前我只使用这个：

if ($(window).width() > 767 && $(window).width() < 1200) {
  var menu_item = [],
      menu_link = [],
      tab_menu_selector = $('.dropdown_tablet > ul');

  $('.main-navbar > li:not(.dropdown_tablet)').each(function(i, items_list){

    if (i > 2) {
      menu_item.push($(this).text());
      menu_link.push($(this).find('a').attr('href'));
      $(this).remove();
    }
  });

  $.each(menu_item, function(i, v) {
    tab_menu_selector.append('<li><a href="' + menu_link[i] + '">' + v + '</li>');
  });

  $('li.dropdown_tablet').show();
}

HTML的切片代码

<li><a href="#4">Market</a></li>
<li><a href="#4">Market</a></li>
<li><a href="#5">Sports</a></li>
<li class="dropdown_tablet">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">OTHER <span class="caret"></span></a>
  <ul class="dropdown-menu">
  </ul>
</li>

它只显示2个菜单项，并将另一个项目移到下拉菜单中 并且仅在刷新页面上有效，而不是在窗口调整大小时，我不知道如何实现将溢出菜单项1逐步移动到Dropdown，如http://yplanapp.com