splitting_links

splitting links multiple columns

by Seokjun Hong

HTML

<div class="right-menu-panel" style="height:250px">
  <div class="secondary-nav">
    <div id="first_row" class="menu-element left" data-prepend="second_row">
      <a href="" class="secondary-menu-link">link1</a>
      <a href="" class="secondary-menu-link">link2</a>
      <a href="" class="secondary-menu-link">link3</a>
      <a href="" class="secondary-menu-link">link4</a>
      <a href="" class="secondary-menu-link">link1</a>
      <a href="" class="secondary-menu-link">link2</a>
      <a href="" class="secondary-menu-link">link3</a>
      <a href="" class="secondary-menu-link">link4</a>
      <a href="" class="secondary-menu-link">link1</a>
      <a href="" class="secondary-menu-link">link2</a>
      <a href="" class="secondary-menu-link">link3</a>
      
    </div>
    <div id="second_row" class="menu-element center" data-prepend="third_row">
      <a href="" class="secondary-menu-link">link5</a>
      <a href="" class="secondary-menu-link">link6</a>
      <a href="" class="secondary-menu-link">link7</a>
      <a href="" class="secondary-menu-link">link8</a>

<!--       <a href="" class="secondary-menu-link">link10</a>
      <a href="" class="secondary-menu-link">link11</a>
      <a href="" class="secondary-menu-link">link12</a>
      <a href="" class="secondary-menu-link">link13</a>
      
      <a href="" class="secondary-menu-link">link14</a>
      <a href="" class="secondary-menu-link">link15</a>
      <a href="" class="secondary-menu-link">link16</a>
      <a href="" class="secondary-menu-link">link17</a>
      
      <a href="" class="secondary-menu-link">link18</a>
      <a href="" class="secondary-menu-link">link19</a> -->
    </div>
    <div id="third_row" class="menu-element right" data-prepend="first_row">
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href=""...

CSS

.right-menu-panel {
  background: hotpink;
  overflow: auto;
}

.secondary-nav {
  height: 100%;
}

.secondary-menu-link {
  display: block;
}

.left,
.center,
.right {
  width: 33.3333%;
  float: left;
  height: 100%;
}

JavaScript

var menuHeight = $(".right-menu-panel").outerHeight();
		var menuItems = Math.max.apply(null, $('.secondary-nav > div').map(function() {
		  return $(this).children().length;
		}).get());
    var maxItems = parseInt(menuHeight / $('.menu-element a').outerHeight());
    var menuElements = $('.menu-element');
    var indexer = Array.apply(null, Array(menuElements.length)).map(function (_, i) {return i;});
    indexer.unshift(indexer.pop());
    
		$.each(indexer, function(idx, elem) {
    	var prepend = $(menuElements[elem]).attr('data-prepend');
      if ($(menuElements[elem]).children().length > maxItems) {
      	var items = $(menuElements[elem]).children().slice(maxItems).detach();
        $('#' + prepend).prepend(items);
      }
    });

console.log(menuItems);
		console.log(menuHeight);