Question

I have a dynamic two level UL LI drop down menu in wp. Actually, its currently a two column menu and rows are coming as required by child li elements. On some of the LI, child elements have lot of items, and I want to control it somehow to have only 5 row, if more than 5 rows then I want it to have more columns as required to accomodate all the items in menu.

Currently its a floated li elements with fixed width in a fixed width UL that supports two column.

So, I want it to have 2/3/4 or 5 columns as required but rows should be 5 always.

Its a dynamic menu and I don’t have any idea, how to do it.

Answer 1

One solution is to use the php array_chunk function to split the child items into groups of 5, then render each group in a different column as a separate list.

<?php
$items = array(1,2,3,4,5,56,6,63,7,8,9,876,5,4,436,23,57,575,4734,62);
$chunks = array_chunk($items, 5);       
foreach($chunks as $chunk) {
  $col = "<ul>";
  foreach($chunk as $value) {
    $col .= '<li>'.$value.'</li>';  
  }
  $col .= "</ul>";
  echo $col;
}