Question

Ex(pseudo-code):

<ul class="menu">
  <li class="extended">
    <div class="columns column1">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
      </ul>
    </div>
  </li>
  <li class="extended">
    <div class="columns column2">
      <ul>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
      </ul>
    </div>
  </li>
</ul>


<ul class="menu">
  <li class="extended">
    <div class="columns column1">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
    </div>
  </li>
  <li class="extended">
    <div class="columns column2">
      <ul>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
      </ul>
    </div>
  </li>
</ul>

And the goal is to be like this:

Item 1 | Item 6
Item 2 | Item 7
Item 3 | Item 8
Item 4 | Item 9
Item 5 | Item 10

or

Item 1 | Item 7
Item 2 | Item 8
Item 3 | Item 9
Item 4 | Item 10
Item 5 | Item 11
Item 6

Question:
I want to get the max width of column1 and column2 then add the result and set as width of main-wrapper:
totalWidth = column1 + column2
$(‘.main-wrapper’).css(‘width’, totalWidth);

My implentation:

var $listing = $(this).find('ul.menu .extended ul li'); 
var $col1, $col2;
// Loop through all target submenu lists
$listing.each(function(key, value) {
   var $t = $(value);
   if(key == 0) {
   // Get the width of the first column
     $col1 = $t.outerWidth(true);
   } else if(key == $listing.length-1) {
     // Get the width of the second column
     $col2 = $t.outerWidth(true);
    }
});
// Store the total width of columns in variable
var $total_width = $col1 + $col2 + 46;  
// Append the width in the parent ul element
$(this).find('ul.menu').css('width', $total_width);

But my script only get the width correctly if the text has no spaces.

Answer 1

Here my solution to my question. Thanks guys for all the inputs.

(function ($) {

  Drupal.behaviors.menu = {
    attach: function (context, settings) {


      /** SOF Block: Populate the menu items to each columns **/
      var $lists = $('#navigation li.expanded ul.menu'); 

      // Loop through all target lists.
      $lists.each(function(i, e) {

        var $list = $(e);
        // Count all the items
        var $count_list = $(this).find('li').size();
        // Get the ceiling for first column
        var $sliced_list = Math.ceil($count_list / 2);

        if($count_list > 5) {

          //These are temporary variables.
          var $new_list = $('<ul>');
          var $list_item, $sub_list, $sub_set;

          // Set the number of items per column when less than 9
          if($count_list < 9) {
            // The number of items per column.
            var per_column = 5;
          } 

          // Dynamic number of items per column when more that or equal to 9
          if($count_list >= 9) {
            var per_column = $sliced_list;
          }

          // Calculate the amount of columns needed.
          var n = Math.ceil($list.find('li').length / per_column);

          // Loop through all columns.
          for (var i = 0; i < n; ++i) {

            // Creates the sub list for the current column.
            $sub_list = $('<ul class="columns column' + (i + 1) + '">');
            // Gets the first set of list items from the original list and adds them to the sub list created above.
            $sub_set = $list.find('li').slice(0, per_column).appendTo($sub_list);
            // Creates a new list item and adds the sub list to it.
            $list_item = $('<li class="extended extended' + (i + 1) + '">').append($sub_list);
            // Add the newly created list item to the new list.
            $new_list.append($list_item);
            // Create a div with the class 'columnX' and wrap the sub list with it.
            //$sub_list.wrap('<div class="columns column' + (i + 1) + '"></div>');

          }

          // Replace the original list with the new one.
          $list.html($new_list.html());

        }
      }); 
      /** EOF Block: Populate the menu items to each columns **/

      /** SOF Block: Apply all necessary changes to focused menu items **/
      // Set all settings required on hover
      $('#navigation ul li.expanded').hover(function() {
        $(this).children().next('ul').css('display', 'block');
        $(this).addClass('hover'); 
        // Get the width of parent li
        var w = $(this).width();
        // Apply the width to the "div class='fix'" element to avoid overlapping
        $(this).children().next('div').css('width', w + 'px');      
      }, function() {
        $(this).children().next('ul').css('display', 'none');
        $(this).removeClass('hover');
      });
      /** EOF Block: Remove all changes applied to all focused menu items on mouseouot **/    

    }
  };
})(jQuery);