PHP split ul evenly into 3 columns Joomla Menu Module

Question

I am currently creating a joomla menu module, but Ive come across some issues..

i am trying to split the sub menu items into 3 columns, currently i am using this:

$counter = 0;

if($item->level == 2):
    $counter += count($item);
endif;

if($item->level == 1):
    $counter = 0;
endif;

if($counter%3 == 0 && $item->level == 2){
        echo '</ul><ul class="col-lg-3">';
    }

but this just groups them into 3's

Here's the entire default.php:

<?php

// No direct access
defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$counter = 0;

?>

<ul class="nav navbar-nav <?php echo $class_sfx; ?>  nav-mega"<?php
$tag = '';
if ($params->get('tag_id') != null)
{
    $tag = $params->get('tag_id') . '';
    echo ' id="' . $tag . '"';
}
?>>

<?php
    foreach ($list as $i => &$item) {

        if($item->level == 2):
            $counter += count($item);
        endif;

        if($item->level == 1):
            $counter = 0;
        endif;

        $class = 'item-' . $item->id;
        if ($item->id == $active_id) {
            $class .= ' current';
        }

        if (in_array($item->id, $path)){
            $class .= ' active';
        }elseif ($item->type == 'alias'){
            $aliasToId = $item->params->get('aliasoptions');
            if (count($path) > 0 && $aliasToId == $path[count($path) - 1]) {
                $class .= ' active';
            }elseif (in_array($aliasToId, $path)){
                $class .= ' alias-parent-active';
            }
        }

        if ($item->deeper){
            $class .= ' deeper dropdown';
        }

        if ($item->parent){
            $class .= ' parent';
        }

        if (!empty($class)){
            $class = ' class="' . trim($class) . '"';
        }

        echo '<li' . $class . '>';

        // Render the menu item.
        switch ($item->type){
            case 'separator':
            case 'url':
            case 'component':
                require JModuleHelper::getLayoutPath('mod_blogmenu', 'default_' . $item->type);
            break;

            default:
                require JModuleHelper::getLayoutPath('mod_blogmenu', 'default_url');
            break;
        }

        // The next item is deeper.
        if($counter%3 == 0 && $item->level == 2){
            echo '</ul><ul class="col-lg-3">';
        }

        if ($item->deeper){
            echo '<div class="dropdown-menu mega-dropdown">';
            echo '<div class="mega-image col-lg-3 thumbnail visible-md visible-lg"><img src="'.$item->menu_image.'" /></div>';
            echo '<ul class="col-lg-3">';
        }
                // The next item is shallower.
        elseif ($item->shallower){

            echo str_repeat('</ul><div class="mega-caption"></div></div>', $item->level_diff);
        }
                // The next item is on the same level.
        else {
            //echo '</li>';
        }
    }

?>
</ul>

Sorry a lot of code; I am still trying to learn PHP and trying to understand Joomla's way of doing things, it isn't all too easy for me.

I did not dive too deeply into the code, but why are you putting a piece of code that closes a `ul` between those that open and close a `li` that this `ul` should contain, if I understand the design correctly? — MasterAM, Sep 25 '13 at 19:59
because i don't know what i am doing?.. i fixed most of it, its just splitting them into 3 columns now.. ill update my question.. Thanks for the response — , Sep 25 '13 at 20:08
As you've got a hierarchical list, it is not possible in HTML (the way you do it in quite some general meaning) to create multiple columns out of it. I would go with a `RecursiveIterator` because it can keep track of levels as you would need to close the whole UL/LI hierarchy when one column ends and re-open it when the next column starts. It's not that easy to explain nor that easy to write the code for, some related code might be linked from: [checking value in n-depth tree?](http://stackoverflow.com/a/12758996/367456) — hakre, Oct 02 '13 at 06:44
And what do you mean by evenly? Always the same number of entries (what do you do if the menu doesn't have a number of entries divide able by three?) or perhaps the same number of characters or even image pixels? And do you need to preserve the hierarchical structure? — hakre, Oct 02 '13 at 06:47
Sorry, the evenly was an error on my part.. all i ment was if there's 10 items its should go something like | item1 item2 item3 item4 | item5 item6 item7 | item8 item9 item10... — , Oct 02 '13 at 07:53

score 1 · Answer 1 · answered Oct 03 '13 at 19:58

Can you put it into CSS columns?

<!DOCTYPE html>
<html>
<head>

<style>
div.columns {
column-width: auto;
-moz-column-width: auto;
-webkit-column-width: auto;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 1em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}

.nosplit {
display: inline-block;
}
</style>

</head>

<body>

<div class="columns">
<ul>
<li>item01</li>
<li>item02</li>
<li>item03</li>
<li>item04</li>
<li class="nosplit">item05
    <ul>
    <li>item05a</li>
    <li>item05b</li>
    </ul>
    </li>
<li>item06</li>
<li>item07</li>
<li class="nosplit">item08
    <ul>
    <li>item08a</li>
    <li>item08b</li>
    <li>item08c</li>
    </ul>
    </li>
<li>item09</li>
<li>item10</li>
</ul>

</body>

</html>

hey, unique solution thanks, but i need to support IE8.. will this still work? — , Oct 04 '13 at 06:40
@DawidvanderHoven - Using this method, you will have to use a JS plugin as IE8 doesn't support columns. should split each "column" up using a `div` and giving it `float:left;` — Lodder, Oct 04 '13 at 10:50

score 1 · Accepted Answer · answered Oct 04 '13 at 21:02

Before you loop through all menuitems, count all the submenuitems for each menuitem. (Disclaimer: I have no knowledge of Joomla Menus, but I'm hoping $item->parent->id references to id of the parent item.)

$submenuItemsTotals = array();
foreach ($list as $i => &$item) { 
   if ($item->level == 2) {
       if (!isset($submenuItemsTotal[$item->parent->id])) {
          $submenuItemsTotal[$item->parent->id] = 1;
       } else {
          $submenuItemsTotal[$item->parent->id]++;
       }
   }
}

$itemsPerColumn = array();
foreach ($submenuItemsTotals as $parentId => $submenuItemsTotal) {
   $itemsPerColumn[$parentId] = ceil($submenuItemsTotal / 3); 
}


// Here comes your existing code with a small change

foreach ($list as $i => &$item) { 
    [your code....]

    // The next item is deeper.
    if($item->level == 2 && ($counter % $itemsPerColumn[$item->parent->id]) == 0){
        echo '</ul><ul class="col-lg-3">';
    }

    [your code....]
}

Thanks again for your answer but i got the following errors: Notice: Undefined index: 108 in /storage/websites/niflas/modules/mod_blogmenu/tmpl/default.php on line 89 Warning: Division by zero in /storage/websites/niflas/modules/mod_blogmenu/tmpl/default.php on line 89 — , Oct 10 '13 at 10:55

PHP split ul evenly into 3 columns Joomla Menu Module

2 Answers2