Build recursive nested menu from array

Question

I\'m trying to build a recursive menu which would look something like this when finished, with an infinite amount of nested items:

Answer 1

This is my example code to build nested menu for Zurb Foundation, using recursive function in PHP. Very simple and clean.

// call the function
build_menu();

//----------------------------

// recursive function
function build_menu($parent = "", $tab=""){
    $sql = "SELECT * FROM cat WHERE parent='$parent' ORDER BY category ASC";
    $q = mysql_query($sql);
    if (mysql_num_rows($q)) {
        if (empty($parent)):
            print $tab."<ul>\n";
        else:
            print $tab."<ul class='dropdown'>\n";
        endif;
        while($d = mysql_fetch_object($q)) {
            $has_child = mysql_num_rows(mysql_query("select * from cat where parent='$d->code'") );
            $tag = ($has_child ? " class='has-dropdown'" : "");
            $nl  = ($has_child ? "\n" : "");

            print $tab."\t"."<li".$tag."><a href='cat.php?cat=$d->code'>$d->category</a>$nl";

            if ($has_child) build_menu($d->code, $tab."\t");

            print $tab."</li>\n";
        }
        print $tab."</ul>\n";
    }
}

Answer 2

I would index all the menu items (pages) by id first. In the second loop associate menu items with their parents and keep track of top level items.

One of the ways I would do it (Render method is just an example):

$sqlGetDropdownPages = "SELECT * FROM `cms_staticPages` ORDER BY `sortOrder` ASC";
$qryGetDropdownPages = mysql_query($sqlGetDropdownPages) or die(mysql_error());

//indexing pages by id
while ($pageRow = mysql_fetch_assoc($qryGetDropdownPages)) {
    $menuItems[$pageRow['id']] = new MenuItem($pageRow);
}

//associating pages with parents
foreach ($menuItems as $menuItem) {
    if ($menuItem->hasParent()) {
        $menuItem->addToParent($menuItems);
    } else {
        $topLevel[] = $menuItem;
    }
}

//$topLevel is an array of menuItems without parents
$render = '<ul>';
foreach ($topLevel as $menuItem) {
    $render .= $menuItem->render(true);
}
$render .= '</ul>';

MenuItem class would look something like this

class MenuItem {

    /**
     * @var array
     */
    private $data;

    /**
     * @var MenuItem[]
     */
    private $children = array();

    /**
     * @var MenuItem
     */
    private $parent;

    /**
     * @param array $data
     */
    public function __construct($data) {
        $this->data = $data;
    }

    /**
     * Finds the parent in the collection and adds itself to it
     * @param MenuItem[] $menuItems
     */
    public function addToParent($menuItems) {
        if (isset($menuItems[$this->data['parent_id']])) {
            $this->parent = $menuItems[$this->data['parent_id']];
            $this->parent->addChild($this);
        }
    }

    /**
     * @return bool
     */
    public function hasParent() {
        return empty($this->data['parent_id']);
    }

    /**
     * @param MenuItem $child
     */
    public function addChild(MenuItem $child) {
        $this->children[] = $child;
    }

    /**
     * Renders the menu with ul li
     * @param bool $withChildren
     * @return string
     */
    public function render($withChildren = false) {
        $render = '<li>' . $this->data['identifier'] . '</li>';

        if ($withChildren) {
            $render .= '<ul>';
            foreach ($this->children as $child) {
                $render .= $child->render(true);
            }
            $render .= '</ul>';
        }

        return $render;
    }

}

Answer 3

Suppose that after extracting all menu items from the database, it outputs an output as follows.

$items = [
[
    'id' => '1',
    'parent_id' => '0',
    'title' => 'Menu 1',
],
[
    'id' => '2',
    'parent_id' => '0',
    'title' => 'Menu 2',
],
[
    'id' => '3',
    'parent_id' => '2',
    'title' => 'Menu 2 1',
],
[
    'id' => '4',
    'parent_id' => '0',
    'title' => 'Menu 3',
],
[
    'id' => '5',
    'parent_id' => '4',
    'title' => 'Menu 3 1',
],
[
    'id' => '6',
    'parent_id' => '5',
    'title' => 'Menu 3 1 1',
],
[
    'id' => '7',
    'parent_id' => '5',
    'title' => 'Menu 3 1 2',
],
[
    'id' => '8',
    'parent_id' => '7',
    'title' => 'Menu 3 1 2 1',
],
[
    'id' => '9',
    'parent_id' => '4',
    'title' => 'Menu 3 2',
],
[
    'id' => '10',
    'parent_id' => '0',
    'title' => 'Menu 4',
]];

Let's write a function to process the data in Array format and return html

/**
 * Recursive and prints the elements of the given parent id.
 * @param $items
 * @param string $parentId
 */
function buildNestedItems($items, $parentId = "0", $wrapperTag = 'ul', $itemTag = 'li')
{
    // Parent items control
    $isParentItem = false;
    foreach ($items as $item) {
        if ($item['parent_id'] === $parentId) {
            $isParentItem = true;
            break;
        }
    }

    // Prepare items
    $html = "";
    if ($isParentItem) {
        $html .= "<$wrapperTag>";
        foreach ($items as $item) {
            if ($item['parent_id'] === $parentId) {
                $html .= "<$itemTag>" . $item['title'] . "</$itemTag>";
                $html .= buildNestedItems($items, $item['id']);
            }
        }
        $html .= "</$wrapperTag>";
    }
    return $html;
}

Let's print the prepared html i page

<div class="menu">
    <?php echo buildNestedItems($items); ?>
</div>