Skip to content

Instantly share code, notes, and snippets.

@jeremyfelt
Created February 1, 2012 18:10
Show Gist options
  • Save jeremyfelt/1718393 to your computer and use it in GitHub Desktop.
Save jeremyfelt/1718393 to your computer and use it in GitHub Desktop.
Dynamic Multiple Column Unordered Lists
( function($){
var parent_ul_selector = '#menu-header-navigation', /* Selector for the nav menu you're working with. */
child_li_selector = '.nav-mid-item', /* Selector for child <li> elements this applies to. */
new_div_id_prefix = 'menu-replace', /* ID prefix for the newly created <div> elements. */
new_div_class = 'menu-replaced', /* Class for the newly created <div> elements. */
column_selector_prefix = 'column', /* Selector prefix used for newly created <ul> elements. */
new_ul_class = 'sub-menu-replace', /* Class for newly created <ul> elements. */
max_columns = 3, /* Maximum columns, pending available list items */
min_column_size = 2, /* Minimum items in the shortest column before # of columns is reduced. */
div_count = 0, /* For CSS ID uniqueness */
splice_count,
first_column_size, /* If an uneven # of items, the leftover is assigned the first column. */
current_columns,
current_min_column_size,
item_count,
max_column_size,
column_count,
items_processed;
/* Assuming that each 'parent-ul-selector' contains one or more 'children-li-selector' <li> elements containing
* another child <ul> element that it can parse into columns. */
$( parent_ul_selector ).children( child_li_selector ).each( function(){
current_columns = max_columns;
current_min_column_size = min_column_size;
item_count = $( this ).children().children().size(); /* Number of <li> elements in current list */
max_column_size = Math.floor( item_count / current_columns ); /* Max number of <li> elements per column */
current_min_column_size = item_count < max_column_size ? item_count : current_min_column_size;
while ( max_column_size < current_min_column_size ){
current_columns--;
max_column_size = Math.floor( item_count / current_columns );
current_min_column_size = 1 == current_columns ? max_column_size : current_min_column_size;
}
if ( current_columns > 1 ) {
first_column_size = item_count - ( ( current_columns - 1 ) * max_column_size );
}else{
first_column_size = item_count;
}
$(this).append( '<div id="' + new_div_id_prefix + div_count + '" class="' + new_div_class + '"></div>' );
column_count = 1; /* For counting & uniqueness */
items_processed = 0;
while( column_count <= current_columns ){
splice_count = 1 == column_count ? first_column_size : max_column_size;
if ( splice_count >= (item_count - items_processed ) ){ splice_count = ( item_count - items_processed ); }
$( '#' + new_div_id_prefix + div_count ).append( '<ul id="' + column_selector_prefix + div_count + column_count + '" class="' + column_selector_prefix + column_count + ' ' + new_ul_class + '"></ul>' );
$( '#' + column_selector_prefix + div_count + column_count ).html($(this).children().children().splice( 0, splice_count ) );
column_count++;
items_processed += splice_count;
}
div_count++;
});
} )( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment