Recursive function to create Multi-Level Menu in PHP

Php-mysql Course

The PHP function presented in this page can be used to create Multi-Level Menu. The function receives three arguments:
      - $parentId - the ID of the parent /category with sub-categories.
      - $ctgLists - a two dimensional array with parents and their direct child-lists (their IDs).
      - $ctgData - a two dimensional array with data (name, link-URL) of each list /anchor in menu.

Code of the multilevelMenu() function

// recursive function to create multilevel menu list, $parentId 0 is the Root
// function addapted from: http://crisp.tweakblogs.net/blog/317/formatting-a-multi-level-menu-using-only-one-query.html
function multilevelMenu($parentId, $ctgLists, $ctgData) {
  $html = '';       // stores and returns the html code with Menu lists

  // if parent item with child IDs in ctgLists
  if(isset($ctgLists[$parentId])) {
    $html = '<ul>';      // open UL

    // traverses the array with child IDs of current parent, and adds them in LI tags, with their data from $ctgData
    foreach ($ctgLists[$parentId] as $childId) {
      // define CSS class in anchors, useful to be used in CSS style to design the menu
      if($parentId == 0) $clsa = ' class="firsrli"';       // class for anchors in main /first categories
      else if(isset($ctgLists[$childId])) $clsa = ' class="litems"';       // class for anchors in lists with childs
      else $clsa = '';

      // open LI
      $html .= '<li><a href="'. $ctgData[$childId]['lurl'] .'" title="'. $ctgData[$childId]['lname'] .'"'. $clsa .'>'. $ctgData[$childId]['lname'] .'</a>';

      $html .= multilevelMenu($childId, $ctgLists, $ctgData);     // re-calls the function to find parent with child-items recursively

      $html .= '</li>';      // close LI
    }
    $html .= '</ul>';       // close UL
  }

  return $html;
}

- Example of usage multilevelMenu() function:

<?php
// recursive function to create multilevel menu list, $parentId 0 is the Root
function multilevelMenu($parentId, $ctgLists, $ctgData) {
  $html = '';       // stores and returns the html code with Menu lists

  // if parent item with child IDs in ctgLists
  if(isset($ctgLists[$parentId])) {
    $html = '<ul>';      // open UL

    // traverses the array with child IDs of current parent, and adds them in LI tags, with their data from $ctgData
    foreach ($ctgLists[$parentId] as $childId) {
      // define CSS class in anchors, useful to be used in CSS style to design the menu
      if($parentId == 0) $clsa = ' class="firsrli"';       // class for anchors in main /first categories
      else if(isset($ctgLists[$childId])) $clsa = ' class="litems"';       // class for anchors in lists with childs
      else $clsa = '';

      // open LI
      $html .= '<li><a href="'. $ctgData[$childId]['lurl'] .'" title="'. $ctgData[$childId]['lname'] .'"'. $clsa .'>'. $ctgData[$childId]['lname'] .'</a>';

      $html .= multilevelMenu($childId, $ctgLists, $ctgData);     // re-calls the function to find parent with child-items recursively

      $html .= '</li>';      // close LI
    }
    $html .= '</ul>';       // close UL
  }

  return $html;
}

// array with parents and their childs
$ctgLists = array (
  0 => array (1, 33),
  1 => array (2, 15, 28, 31, 32),
  2 => array (3, 7, 12),
  3 => array (4, 5, 6),
  7 => array (8, 10, 11),
  8 => array (9),
  12 => array (13, 14),
  15 => array (16, 21, 22, 23, 27),
  16 => array (17, 18, 19, 20),
  23 => array (24, 25, 26),
  28 => array (29, 30),
  33 => array (34),
  34 => array (35, 38, 46),
  35 => array (36, 37),
  38 => array (39, 43),
  39 => array (40, 41, 42),
  43 => array (44, 45)
);

// array with link data
$ctgData = array (
  0 => array (
    'lname' => 'Root',
    'lurl' => '#',
  ),
  1 => array (
    'lname' => 'CoursesWeb.net',
    'lurl' => 'https://coursesweb.net/',
  ),
  2 => array (
    'lname' => 'JavaScript Courses',
    'lurl' => 'https://coursesweb.net/javascript/',
  ),
  3 => array (
    'lname' => 'Tutorials',
    'lurl' => 'https://coursesweb.net/javascript/tutorials_t',
  ),
  4 => array (
    'lname' => 'setTimeout - setInterva',
    'lurl' => 'https://coursesweb.net/javascript/settimeout-setinterval_t',
  ),
  5 => array (
    'lname' => 'Dynamic variables',
    'lurl' => 'https://coursesweb.net/javascript/dynamic-variables-javascript_t',
  ),
  6 => array (
    'lname' => 'Validate radio - checkbox',
    'lurl' => 'https://coursesweb.net/javascript/validate-radio-checkbox-buttons_t',
  ),
  7 => array (
    'lname' => 'jQuery Course',
    'lurl' => 'https://coursesweb.net/jquery/jquery-course',
  ),
  8 => array (
    'lname' => 'jQuery Basics',
    'lurl' => 'https://coursesweb.net/jquery/jquery-basics',
  ),
  9 => array (
    'lname' => 'Selecting HTML elements',
    'lurl' => 'https://coursesweb.net/jquery/jquery-basics#selelm',
  ),
  10 => array (
    'lname' => 'jQuery ajax()',
    'lurl' => 'https://coursesweb.net/jquery/jquery-ajax',
  ),
  11 => array (
    'lname' => 'slideDown - SlideUp',
    'lurl' => 'https://coursesweb.net/jquery/slidedown-slideup',
  ),
  12 => array (
    'lname' => 'JS Scripts',
    'lurl' => 'https://coursesweb.net/javascript/javascript-scripts_s2',
  ),
  13 => array (
    'lname' => 'JS Trivia Game',
    'lurl' => 'https://coursesweb.net/javascript/trivia-game-script_s2',
  ),
  14 => array (
    'lname' => 'Scroll to Top Page Button',
    'lurl' => 'https://coursesweb.net/javascript/trivia-game-script_s2',
  ),
  15 => array (
    'lname' => 'PHP-MySQL Course',
    'lurl' => 'https://coursesweb.net/php-mysql/',
  ),
  16 => array (
    'lname' => 'Lessons',
    'lurl' => 'https://coursesweb.net/php-mysql/lessons',
  ),
  17 => array (
    'lname' => 'PHP Strings',
    'lurl' => 'https://coursesweb.net/php-mysql/strings',
  ),
  18 => array (
    'lname' => 'Constants',
    'lurl' => 'https://coursesweb.net/php-mysql/constants',
  ),
  19 => array (
    'lname' => 'Arrays',
    'lurl' => 'https://coursesweb.net/php-mysql/arrays',
  ),
  20 => array (
    'lname' => 'PHP PDO',
    'lurl' => 'https://coursesweb.net/php-mysql/pdo-introduction-connection-database',
  ),
  21 => array (
    'lname' => 'Tutorials',
    'lurl' => 'https://coursesweb.net/php-mysql/tutorials_t',
  ),
  22 => array (
    'lname' => 'Uploading multiple files',
    'lurl' => 'https://coursesweb.net/php-mysql/uploading-multiple-files_t',
  ),
  23 => array (
    'lname' => 'Common PHP Errors',
    'lurl' => 'https://coursesweb.net/php-mysql/common-php-errors-solution_t',
  ),
  24 => array (
    'lname' => 'Unespected /',
    'lurl' => 'https://coursesweb.net/php-mysql/common-php-errors-solution_t#perr1_0',
  ),
  25 => array (
    'lname' => 'headers already sent',
    'lurl' => 'https://coursesweb.net/php-mysql/common-php-errors-solution_t#perr12_11',
  ),
  26 => array (
    'lname' => 'Undefined variable',
    'lurl' => 'https://coursesweb.net/php-mysql/common-php-errors-solution_t#perr13_12',
  ),
  27 => array (
    'lname' => 'Code Snippets',
    'lurl' => 'https://coursesweb.net/php-mysql/common-php-errors-solution_t#perr13_12',
  ),
  28 => array (
    'lname' => 'Ajax Lessons',
    'lurl' => 'https://coursesweb.net/ajax/',
  ),
  29 => array (
    'lname' => 'Tutorials',
    'lurl' => 'https://coursesweb.net/ajax/tutorials_t',
  ),
  30 => array (
    'lname' => 'Download Resources',
    'lurl' => 'https://coursesweb.net/ajax/download_l2',
  ),
  31 => array (
    'lname' => 'HTML Course',
    'lurl' => 'https://coursesweb.net/html/',
  ),
  32 => array (
    'lname' => 'CSS Course',
    'lurl' => 'https://coursesweb.net/css/',
  ),
  33 => array (
    'lname' => 'MarPlo.net',
    'lurl' => 'https://marplo.net/',
  ),
  34 => array (
    'lname' => 'JavaScript',
    'lurl' => 'https://marplo.net/javascript/',
  ),
  35 => array (
    'lname' => 'JS Lessons',
    'lurl' => 'https://marplo.net/javascript/lectii-js',
  ),
  36 => array (
    'lname' => 'Syntax',
    'lurl' => 'https://marplo.net/javascript/sintaxajs.html',
  ),
  37 => array (
    'lname' => 'Functions',
    'lurl' => 'https://marplo.net/javascript/functii1.html',
  ),
  38 => array (
    'lname' => 'jQuery',
    'lurl' => 'https://marplo.net/javascript/curs-jquery-tutoriale-js',
  ),
  39 => array (
    'lname' => 'jQuery CSS',
    'lurl' => 'https://marplo.net/javascript/jquery-css-js',
  ),
  40 => array (
    'lname' => 'CSS Properties',
    'lurl' => 'https://marplo.net/javascript/jquery-css-js#setcss',
  ),
  41 => array (
    'lname' => 'Add / Delete Classes',
    'lurl' => 'https://marplo.net/javascript/jquery-css-js#arclass',
  ),
  42 => array (
    'lname' => 'Check Classes',
    'lurl' => 'https://marplo.net/javascript/jquery-css-js#ceclass',
  ),
  43 => array (
    'lname' => 'fadeIn - fadeOut',
    'lurl' => 'https://marplo.net/javascript/jquery-fadein-fadeout-js',
  ),
  44 => array (
    'lname' => 'fadeIn - fadeOut',
    'lurl' => 'https://marplo.net/javascript/jquery-fadein-fadeout-js',
  ),
  45 => array (
    'lname' => 'fadeTo',
    'lurl' => 'https://marplo.net/javascript/jquery-fadein-fadeout-js#fadeto',
  ),
  46 => array (
    'lname' => 'JS Tutorials',
    'lurl' => 'https://marplo.net/javascript/tutoriale-js',
  )
);

echo '<div id="m_menu">'. multilevelMenu(0, $ctgLists, $ctgData) .'</div>';     // outputs html with menu lists
?>

The code above will generate these HTML lists:
- Once the HTML code with the lists is created, you can apply CSS properties to design the dropdown menu.
Here's two CSS codes that can be used for Horizontal and Vertical Dropdown Menu. The menu-lists are included into a DIV with id="m_menu" (click on the image to see how the menu looks):

CSS code for Horizontal-Vertical Menu

/* Horizontal-Vertical Menu - https://CoursesWeb.net */ #m_menu { position: relative; margin: 0 8%; height:1.7em; background-color: #e0e1e0; padding:2px .3em; } #m_menu ul{ margin:0 auto; list-style-type:none; padding:0 .1em; } #m_menu ul li{ float: left; position: relative; margin:1px .3em; background-color: #e0e1e0; padding:0; } #m_menu ul li:hover{ background-color: #fbfb01; -moz-border-radius:0; -webkit-border-radius:0; -khtml-border-radius:0; border-radius:0; } #m_menu ul li a{ display: block; color: #000; padding: .1em .7em; font-size:1.05em; font-family:Calibri; font-weight:800; color:#0001be; } #m_menu ul li a:hover{ background-color: #00ed01; } #m_menu ul li:hover > ul{ display: block; } #m_menu ul li ul{ position: absolute; top:1.4em; left:0; display: none; border:1px dashed #010203; background-color: #c0c1f2; padding:.1em; } #m_menu ul li ul li{ float: none; position: relative; margin:2px 0; background-color: #f6f7f8; text-align:left; -moz-border-radius:.6em; -webkit-border-radius:.6em; -khtml-border-radius:.6em; border-radius:.6em; } #m_menu ul li ul li a{ white-space: nowrap; line-height:120%; text-decoration:none; font-weight:500; } #m_menu ul li ul li a:hover { text-decoration:underline; color:#001; } #m_menu ul li ul li ul{ position: absolute; top:0; left:100%; display: none; border:1px dashed #010203; background-color: #c0c1f2; } #m_menu ul li ul li .litems:after { content: " >>"; color: #00d001; font-weight: 600; } #m_menu .firsrli { color:#fff; box-shadow:.15em .13em .25em #6789da inset; -webkit-box-shadow:.15em .13em .25em #6789da inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; -khtml-border-radius:.5em; border-radius:.5em; background: #0809be; background-image: -ms-linear-gradient(top, #0809be, #cfd0fe); /* IE10 */ background-image:-moz-linear-gradient(top, #0809be, #cfd0fe 95%); /* Mozilla */ /* for Safari, Chrome */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0809be), color-stop(0.9, #cfd0fe)); background-image: -o-linear-gradient(top, #0809be, #cfd0fe); /* Opera 11.1+ */ background: linear-gradient(top, #0809be, #cfd0fe); /* W3C Markup */ }

CSS code for Vertical-Horizontal Menu

/* Vertical-Horizontal Menu https://CoursesWeb.net */ #m_menu { position: relative; margin: 0 auto 0 20%; width: 10em; background-color: #e0e1e0; padding:3px .3em; text-align: center; } #m_menu ul{ margin:0 auto; list-style-type:none; padding:0 .1em; } #m_menu ul li{ position: relative; margin:.3em 0; background-color: #f6f7f8; text-align:left; font-weight: 800; -moz-border-radius:.6em; -webkit-border-radius:.6em; -khtml-border-radius:.6em; border-radius:.6em; } #m_menu ul li:hover{ background-color: #fbfb01; -moz-border-radius:0; -webkit-border-radius:0; -khtml-border-radius:0; border-radius:0; } #m_menu ul li a{ display: block; color: #000; padding: .2em .8em; font-size:1em; font-family:Calibri; text-decoration:none; } #m_menu ul li a:hover{ background-color: #00ed01; text-decoration:underline; } #m_menu ul li:hover > ul{ display: block; } #m_menu ul li ul{ position: absolute; top:2px; left:100%; display: none; border:1px dashed #0001b0; background-color: #d7d8f9; padding:.1em; } #m_menu ul li ul li{ position: relative; font-weight: 500; } #m_menu ul li ul li a{ white-space: nowrap; line-height:120%; } #m_menu ul li ul li ul{ position: absolute; top:0; left:100%; display: none; border:1px dashed #0001b0; background-color: #d7d8f9; } #m_menu ul li .litems:after { content: " >>"; color: #00d001; font-weight: 600; } #m_menu .firsrli { color:#fff; box-shadow:.15em .13em .25em #6789da inset; -webkit-box-shadow:.15em .13em .25em #6789da inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; -khtml-border-radius:.5em; border-radius:.5em; background: #0809be; background-image: -ms-linear-gradient(top, #0809be, #cfd0fe); /* IE10 */ background-image:-moz-linear-gradient(top, #0809be, #cfd0fe 95%); /* Mozilla */ /* for Safari, Chrome */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0809be), color-stop(0.9, #cfd0fe)); background-image: -o-linear-gradient(top, #0809be, #cfd0fe); /* Opera 11.1+ */ background: linear-gradient(top, #0809be, #cfd0fe); /* W3C Markup */ }

<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>

#id {
  font-weight: 800;
}

function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);

$vname = 8;
echo $vname;