How to properly implement the adaptive navbar functionality?

function responseMenu() {
  $('ul.dropdown-menu li.item').appendTo('ul.menu');
  var items = $('ul.menu li.item');
  var max_width = $('ul.menu').width() - $('ul.menu li.dd_menu').outerWidth();
  var width = 0;
  var hide_from = 0;

  items.css({
    'width': 'auto'
  });

  items.each(function(index) {
    if (width + $(this).outerWidth() > max_width) {
      return false;
    } else {
      hide_from = index;
      width += $(this).outerWidth();
    }
  });
  if (hide_from < items.length - 1) {
    items.eq(hide_from).nextAll('li.item').appendTo('ul.dropdown-menu');
    items.css({
      'width': (max_width / (hide_from + 1)) + 'px'
    });
    $('ul.menu li.dd_menu').show();
  } else {
    $('ul.menu li.dd_menu').hide();
  }
}

$(document).ready(function() {
  $('.top_menu').on('click', '.dropdown-toggle', function() {
    $('.dropdown-menu').toggle();
  });

  $(window).on('resize', function() {
    responseMenu();
  }).trigger('resize');

});

ul.menu {
  padding: 0;
  margin: 0;
}

ul.menu li {
  list-style-type: none;
  display: block;
  float: left;
  padding: 5px 0;
  text-align: right;
  white-space: nowrap;
}

ul.menu li.dd_menu {
  float: right;
  position: relative;
  display: none;
}

ul.menu ul.dropdown-menu {
  display: none;
  position: absolute;
  top: 35px;
  right: 10px;
  padding: 5px;
  border: #CCC 1px solid;
  border-radius: 5px;
  z-index: 2;
}

ul.menu ul.dropdown-menu li {
  float: none;
}

ul.menu a {
  color: #0b4da2;
  display: inline-block;
  margin: 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top_menu">
  <ul class="menu">
    <li class="dd_menu">
      <button class="dropdown-toggle" type="button">+</button>
      <ul class="dropdown-menu"></ul>
    </li>
    <li class="item"><a href="#"><span>Menu item #1</span></a></li>
    <li class="item"><a href="#"><span>Menu item #2</span></a></li>
    <li class="item"><a href="#"><span>Menu item #3</span></a></li>
    <li class="item"><a href="#"><span>Menu item #4</span></a></li>
    <li class="item"><a href="#"><span>Menu item #5</span></a></li>
    <li class="item"><a href="#"><span>Menu item #6</span></a></li>
    <li class="item"><a href="#"><span>Menu item #7</span></a></li>
    <li class="item"><a href="#"><span>Menu item #8</span></a></li>
    <li class="item"><a href="#"><span>Menu item #9</span></a></li>
    <li class="item"><a href="#"><span>Menu item #10</span></a></li>
    <li class="item"><a href="#"><span>Menu item #11</span></a></li>
    <li class="item"><a href="#"><span>Menu item #12</span></a></li>
    <li class="item"><a href="#"><span>Menu item #13</span></a></li>
    <li class="item"><a href="#"><span>Menu item #14</span></a></li>
    <li class="item"><a href="#"><span>Menu item #15</span></a></li>
  </ul>
</div>