Shopifyデビューテーマで複数の列にドロップダウンを分割

Question

私はVitakicks.comで作業しています。メインナビゲーションメニューのドロップダウンは長すぎます、一部は40項目あります。今私はそれが10個以上の場合は、列が分割し、別の列を作成します。 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> 

しかし、これがデビューのテーマに取り組んでいません。 だから今解決策はありますか？どうやってやるの？

Answer 1

小さなものにあなたの長い列を分割するためのコードの下に使用してください：

$("#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); 

} 
}); 

と .expended-のdiv { 幅：500pxなど } CSSを使用 .column {フロート：左; }

ありがとうございました