Dynamically Building Horizontal Menu

I have this JavaScript code that allows me to create a horizontal menu with sub menus like so:

• Menu 1
  • Sub Menu 1

Solution 1:

Perhaps a function or a do..while loop may be in order? Proof of concept:

function menuQuery($id)
{
    $query = "SELECT * FROM site_menu WHERE Menu_ParentID = $id";

    if ($query) {
        foreach($query AS $q) {
            //run through the results
            menuQuery($q->id);
        }
    }
}

//initial call of top level menu items
menuQuery(0);

Solution 2:

I would suggest to put a sort or order column in your menu table. You could then pull back all of the results using the sort column. This would allow you to order the Top level of the menu with the sub menu items right underneath each other.

With that you could create just one loop with the database results and choose what section of the menu to write based on whether the parent_id is populated or not.

Solution 3:

1. Write a single query, ordered by Menu_ParentID

2. Process that query one row at a time. You'll be starting with the root since it's ID is 0. For each row, loop through all the other rows and find the children of that row, ie, those rows whose parent id equals the id of the row you are processing. Use this process to build a data structure like so:

   [ Root Item 1, [Child1, Child2, [SubChild1, SubChild2], Child3], Root Item 2, ...]
   

3. Write a helper function like so (untested):

   function displayItem($item) {
     if (is_array($item)) {
       $html = '<li><ul>';
       foreach ($item as $subitem) $html .= displayItem($subItem);
       $html .= '</ul></li>';
       return $html;
     }
     else return '<li>' . $item . '</li>';
   }
   

4. Loop through the structure you created in 2., calling displayItem for each element

Solution 4:

The best technique for storing website navigation trees is called the Nested Set Model.

There is a good example implementation here: Dealing with nested sets in mysql?

Solution 5:

$data=array(
array('Menu_ID'=>1, 'Menu_Name'=>'Catalog', 'Menu_Link'=>'#', 'Menu_ParentID'=>0),
array('Menu_ID'=>2, 'Menu_Name'=>'Reports', 'Menu_Link'=>'#', 'Menu_ParentID'=>0),
array('Menu_ID'=>3, 'Menu_Name'=>'Products','Menu_Link'=> '#','Menu_ParentID'=> 1),
array('Menu_ID'=>4, 'Menu_Name'=>'Sales','Menu_Link'=> '#', 'Menu_ParentID'=>2),
array('Menu_ID'=>5, 'Menu_Name'=>'Customers','Menu_Link'=> '#', 'Menu_ParentID'=>2),
array('Menu_ID'=>6, 'Menu_Name'=>'Tvs','Menu_Link'=> '#','Menu_ParentID'=> 3));

print_r(loop_menu($data));

// Menu_ID Menu_Name Menu_Link Menu_ParentID
function loop_menu($rows,$parent = 0){
 $arr=array();
 $i=0;
  foreach ($rows as $row)
  { 
        if (array_key_exists('Menu_ParentID',$row) && $row['Menu_ParentID'] == $parent){

                if(array_key_exists($i,$arr)){
                    $arr[$i]=array();
                }
                $arr[$i]['data']=$row;
                $arr[$i]['child']= loop_menu($rows,$row['Menu_ID']);
                $i++;
        }
  }
    return $arr;
}

then

Array
(
    [0] => Array
        (
            [data] => Array
                (
                    [Menu_ID] => 1
                    [Menu_Name] => Catalog
                    [Menu_Link] => #
                    [Menu_ParentID] => 0
                )

            [child] => Array
                (
                    [0] => Array
                        (
                            [data] => Array
                                (
                                    [Menu_ID] => 3
                                    [Menu_Name] => Products
                                    [Menu_Link] => #
                                    [Menu_ParentID] => 1
                                )

                            [child] => Array
                                (
                                    [0] => Array
                                        (
                                            [data] => Array
                                                (
                                                    [Menu_ID] => 6
                                                    [Menu_Name] => Tvs
                                                    [Menu_Link] => #
                                                    [Menu_ParentID] => 3
                                                )

                                            [child] => Array
                                                (
                                                )

                                        )

                                )

                        )

                )

        )

    [1] => Array
        (
            [data] => Array
                (
                    [Menu_ID] => 2
                    [Menu_Name] => Reports
                    [Menu_Link] => #
                    [Menu_ParentID] => 0
                )

            [child] => Array
                (
                    [0] => Array
                        (
                            [data] => Array
                                (
                                    [Menu_ID] => 4
                                    [Menu_Name] => Sales
                                    [Menu_Link] => #
                                    [Menu_ParentID] => 2
                                )

                            [child] => Array
                                (
                                )

                        )

                    [1] => Array
                        (
                            [data] => Array
                                (
                                    [Menu_ID] => 5
                                    [Menu_Name] => Customers
                                    [Menu_Link] => #
                                    [Menu_ParentID] => 2
                                )

                            [child] => Array
                                (
                                )

                        )

                )

        )

)

then code something like array to ul

http://sandbox.onlinephpfunctions.com/code/2b3ab04f959413ebf75b65034edd60da61ed0020

update

another array style

$arr[$i]['data'] = $row;
$arr[$i]['child']= loop_menu($rows,$row['Menu_ID']);

change to

$row['child'] = loop_menu($rows,$row['Menu_ID']);
$arr[$i] = $row;

get