Question

I’m building the menu from simple unordered list. Menu will have only top level and one sub level. Goal is to make two column layout for submenus and I already have working static HTML and CSS for this. Only problem is that I need to make this work with dynamic list.

Basically I need jQuery script that will go through all submenu lists and split them into two equal submenu lists. Top level menus have unique class and it would be great if script could add unique classes to new submenu list (column01, column02).

Here is the source code:

<ul>
  <li class="menu01"> 
    <a href="#">First menu</a>
    <ul>
      <li>First 01</li>
      <li>First 02</li>
      <li>First 03</li>
      <li>First 04</li>
      <li>First 05</li>
    </ul>
  </li>
  <li class="menu02"> 
    <a href="#">Second menu</a>
    <ul>
      <li>Second 01</li>
      <li>Second 02</li>
      <li>Second 03</li>
      <li>Second 04</li>
      <li>Second 05</li>
    </ul>
  </li>
</ul>

And this is what I would like to achieve:

<ul>
  <li class="menu01"> 
    <a href="#">First menu</a>
    <ul class="column01">
      <li>First 01</li>
      <li>First 02</li>
      <li>First 03</li>
    </ul>
    <ul class="column02">
      <li>First 04</li>
      <li>First 05</li>
    </ul>
  </li>
  <li class="menu02"> 
    <a href="#">Second menu</a>
    <ul class="column01">
      <li>Second 01</li>
      <li>Second 02</li>
      <li>Second 03</li>
    </ul>
    <ul class="column01">
      <li>Second 04</li>
      <li>Second 05</li>
    </ul>
  </li>
</ul>

You can also grab this on jsFiddle.

Thanks!

Answer 1

CSS is the elegant way to go. If your users do not use modern browser, you can do the following:

$(".menu01 > ul, .menu02 > ul").each(function() {
    var $ul = $(this).addClass("column01"), // Let original be first column
        $lis = $ul.children(), // Find all children `li` elements
        mid = Math.floor($lis.length / 2), // Calculate where to split
        $newCol = $('<ul />', {"class": "column02"}).insertAfter($ul); // Create new column and add after original. "class" needs to be in quotes because it's a reserved keyword

    $lis.each(function(i) {
        i > mid && $(this).appendTo($newCol); // Move `li` elements with index greater than middle
    });
});

(Working demo)

Output:

  <li class="menu01"> 
    <a href="#">First menu</a>
    <ul class="column01">
      <li>First 01</li>
      <li>First 02</li>
      <li>First 03</li>
    </ul>
    <ul class="column02">
      <li>First 04</li>
      <li>First 05</li>
    </ul>
  </li>
  <li class="menu02"> 
    <a href="#">Second menu</a>
    <ul class="column01">
      <li>Second 01</li>
      <li>Second 02</li>
      <li>Second 03</li>
    </ul>
    <ul class="column02">
      <li>Second 04</li>
      <li>Second 05</li>
    </ul>
  </li>