askdesign
11/28/2015 - 11:27 PM

How to split list items into columns using Columnizer jQuery plugin

JQuery plugin

Step 4
At Appearance > Widgets, drag a Custom Menu widget into your widget area and select your desired menu.

Source: http://stackoverflow.com/a/6509239/778809.
// Step 2
// Add the following in child theme’s functions.php:

// Register Before Footer widget area
genesis_register_sidebar( array(
	'id'            => 'before-footer',
	'name'          => __( 'Before Footer', 'themename' ),
	'description'   => __( 'This is the before footer widget area', 'themename' ),
) );

// Display Before Footer widget area
add_action( 'genesis_before_footer', 'sk_before_footer', 7 );
function sk_before_footer() {
	genesis_widget_area( 'before-footer', array(
		'before'	=> '<div class="before-footer widget-area"><div class="wrap">',
		'after'		=> '</div></div>',
	) );
}

// Enqueue Columnizer
add_action( 'wp_enqueue_scripts', 'sk_enqueue_columnizer' );
function sk_enqueue_columnizer() {
	wp_enqueue_script( 'columnizer', get_stylesheet_directory_uri() . '/js/jquery.columnizer.min.js', array( 'jquery' ), '', true );

	wp_enqueue_script( 'columnizer-init', get_stylesheet_directory_uri() . '/js/columnizer-init.js', array( 'columnizer' ), '1.0.0', true );
}
// Step 3
// Add the following in child theme’s style.css:
/* Before Footer widget area
------------------------------------------------------- */

.before-footer {
	margin-bottom: 40px;
}

.before-footer .wrap {
	background-color: #fff;
	padding: 40px;
}
// Step 1
// Create a file named say, columnizer-init.js in your child theme’s js directory (create if not existing) having the following code:

jQuery(function( $ ){

	if ( $(window).width() > 500 ) {
		$( "#menu-long-menu" ).columnize({
			columns: 3,
		});
	}

});

// In the above replace menu-long-menu with the CSS ID of your custom menu by inspecting it in your browser deverloper tools after step 4.