Home » Javascript » Split a Drop-Down Into Multiple Columns In Shopify Debut Theme

Split a Drop-Down Into Multiple Columns In Shopify Debut Theme

Posted by: admin November 1, 2017 Leave a comment

Questions:

I am Working On Vitakicks.com, As You Can See That The Dropdown on main navigation menu are way too long, some have 40 entries. Now i Want that If the number of items are more than 10, the column splits and makes another column.
I Used some code as told by some developer at end of theme.liquid :

<script>
var maxRows = 6;
$('#menu > li.has-sub.level-1 > ul').each( function() {
var count = $(this).children().length;
var columns = Math.ceil(count/maxRows).toString();
$(this).css({
"-webkit-column-count": columns, 
"-moz-column-count": columns, 
"column-count": columns
 });
 });
 </script>

But This is not working On Debut Theme.
So What is solution now? How can i do that?

Answers:

Please use below code to split your long column into small ones:

$("#SiteNav li ul").each(function(){
    var len = jQuery(this).find('li').length;
if(len > 9){

$.fn.extend(
{
    list2Columns: function(numCols)
    {
        var listItems = $(this).find('li'); /* get the list data */
        var listHeader = $(this);
        var numListItems = listItems.length;
        var numItemsPerCol = Math.ceil(numListItems / numCols); /* divide by the number of columns requires */
        var currentColNum = 1, currentItemNumber = 1, returnHtml = '', i = 0;
        var classname = $(this).parent().attr('id');

        /* append the columns */
        for (i=1;i<=numCols;i++)
        {
            $(this).parent().append('<ul class="column list-column-' +classname+ i + '"></ul>');
        }

        /* append the items to the columns */
        $.each(listItems, function (i, v)
        {    
            if (currentItemNumber <= numItemsPerCol){
                currentItemNumber ++;
            }
            else
            {
                currentItemNumber = 1;
                currentColNum ++;
            }
                $('.list-column-'+classname+currentColNum).append(v);
        });
        $(this).parent().addClass('expended-div');
        $(this).remove(); /*clean previous content */

    }
});


 $(this).list2Columns(3);

 }
});

and use css
.expended-div{
width:500px
}
.column { float:left; }

Thanks