Как сделать панель с кнопками и выпадающим списком для кнопок, которые не поместились в панели?

var $nav = $('.greedy-nav'); 
var $btn = $('.greedy-nav button'); 
var $vlinks = $('.greedy-nav .visible-links'); 
var $hlinks = $('.greedy-nav .hidden-links'); 
 
var breaks = []; 
 
function updateNav() { 
   
  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30; 
 
  // The visible list is overflowing the nav 
  if($vlinks.width() > availableSpace) { 
 
    // Record the width of the list 
    breaks.push($vlinks.width()); 
 
    // Move item to the hidden list 
    $vlinks.children().last().prependTo($hlinks); 
 
    // Show the dropdown btn 
    if($btn.hasClass('hidden')) { 
      $btn.removeClass('hidden'); 
    } 
 
  // The visible list is not overflowing 
  } else { 
 
    // There is space for another item in the nav 
    if(availableSpace > breaks[breaks.length-1]) { 
 
      // Move the item to the visible list 
      $hlinks.children().first().appendTo($vlinks); 
      breaks.pop(); 
    } 
 
    // Hide the dropdown btn if hidden list is empty 
    if(breaks.length < 1) { 
      $btn.addClass('hidden'); 
      $hlinks.addClass('hidden'); 
    } 
  } 
 
  // Keep counter updated 
  $btn.attr("count", breaks.length); 
 
  // Recur if the visible list is still overflowing the nav 
  if($vlinks.width() > availableSpace) { 
    updateNav(); 
  } 
 
} 
 
// Window listeners 
 
$(window).resize(function() { 
    updateNav(); 
}); 
 
$btn.on('click', function() { 
  $hlinks.toggleClass('hidden'); 
}); 
 
updateNav();

body { 
  min-width: 320px; 
  padding: 30px; 
  background: #999; 
  font-family: Helvetica, sans-serif; 
} 
h1 { 
  color: #fff; 
  font-weight: bold; 
  text-align: center; 
  margin-top: 50px; 
  font-size: 24px; 
} 
p { 
  color: #fff; 
  text-align: center; 
  margin-top: 10px; 
  font-size: 14px; 
} 
a { 
  color: #fff; 
} 
.greedy-nav { 
  position: relative; 
  min-width: 250px; 
  background: #fff; 
} 
.greedy-nav a { 
  display: block; 
  padding: 20px 30px; 
  background: #fff; 
  font-size: 18px; 
  color: #333; 
  text-decoration: none; 
} 
.greedy-nav a:hover { 
  color: #006cff; 
} 
.greedy-nav button { 
  position: absolute; 
  height: 100%; 
  right: 0; 
  padding: 0 15px; 
  border: 0; 
  outline: none; 
  background-color: #006cff; 
  color: #fff; 
  cursor: pointer; 
} 
.greedy-nav button:hover { 
  background-color: #006cff; 
} 
.greedy-nav button::after { 
  content: attr(count); 
  position: absolute; 
  width: 30px; 
  height: 30px; 
  left: -16px; 
  top: 12px; 
  text-align: center; 
  background-color: #006cff; 
  color: #fff; 
  font-size: 14px; 
  line-height: 28px; 
  border-radius: 50%; 
  border: 3px solid #fff; 
  font-weight: bold; 
} 
.greedy-nav button:hover::after { 
  transform: scale(1.075); 
} 
.greedy-nav .hamburger { 
  position: relative; 
  width: 32px; 
  height: 4px; 
  background: #fff; 
  margin: auto; 
} 
.greedy-nav .hamburger:before, 
.greedy-nav .hamburger:after { 
  content: ''; 
  position: absolute; 
  left: 0; 
  width: 32px; 
  height: 4px; 
  background: #fff; 
} 
.greedy-nav .hamburger:before { 
  top: -8px; 
} 
.greedy-nav .hamburger:after { 
  bottom: -8px; 
} 
.greedy-nav .visible-links { 
  display: inline-table; 
  padding:0; 
  margin:0; 
} 
.greedy-nav .visible-links li { 
  display: table-cell; 
  border-left: 1px solid #999; 
} 
.greedy-nav .hidden-links { 
  position: absolute; 
  right: 0px; 
  top: 100%; 
} 
.greedy-nav .hidden-links li { 
  display: block; 
  border-top: 1px solid #006cff; 
} 
.greedy-nav .visible-links li:first-child { 
  font-weight: bold; 
} 
.greedy-nav .visible-links li:first-child a { 
  color: #006cff !important; 
} 
.greedy-nav .hidden { 
  visibility: hidden; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<nav class='greedy-nav'> 
<button><div class="hamburger"></div></button> 
  <ul class='visible-links'> 
    <li><a target="_blank" href='https://github.com/lukejacksonn/GreedyNav'>Greedy</a></li> 
    <li><a href='#'>navigation</a></li> 
    <li><a href='#'>that</a></li> 
    <li><a href='#'>handles</a></li> 
    <li><a href='#'>overflowing</a></li> 
    <li><a href='#'>menu</a></li> 
    <li><a href='#'>elements</a></li> 
    <li><a href='#'>effortlessly</a></li> 
  </ul> 
  <ul class='hidden-links hidden'></ul> 
</nav>