Recursive function to create Multi-Level Menu in JavaScript

Javascript Course

The JavaScript function presented in this page can be used to create Multi-Level Menu. The function has three parameters:
      - parentId - the ID of the parent /category with sub-categories.
      - ctgLists - an object with parents and their direct child-lists (array with their IDs).
      - ctgData - an object 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) {
  var html = '';       // stores and returns the html code with Menu lists

  // if parent item with child IDs in ctgLists
  if(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
    for (childId in ctgLists[parentId]) {
      // define CSS class in anchors, useful to be used in CSS style to design the menu
      if(parentId == 0) var clsa = ' class="firsrli"';       // to add class to anchors in main /first categories
      else if(ctgLists[ctgLists[parentId][childId]]) var clsa = ' class="litems"';       // to add class to anchors in lists with childs
      else var clsa = '';

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

      html += multilevelMenu(ctgLists[parentId][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:

<div id="m_menu">Here it is included the Menu, with JavaScript</div>

<script type="text/javascript"><!--
// 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) {
  var html = '';       // stores and returns the html code with Menu lists

  // if parent item with child IDs in ctgLists
  if(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
    for (childId in ctgLists[parentId]) {
      // define CSS class in anchors, useful to be used in CSS style to design the menu
      if(parentId == 0) var clsa = ' class="firsrli"';       // to add class to anchors in main /first categories
      else if(ctgLists[ctgLists[parentId][childId]]) var clsa = ' class="litems"';       // to add class to anchors in lists with childs
      else var clsa = '';

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

      html += multilevelMenu(ctgLists[parentId][childId], ctgLists, ctgData);     // re-calls the function to find parent with child-items recursively

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

  return html;
}

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

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

// adds the html menu lists in the DIV with id="m_menu"
document.getElementById('m_menu').innerHTML = multilevelMenu(0, ctgLists, ctgData);
//-->
</script>

The code above will build and display these HTML lists:
- To display properly these memu lists, 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 */ }

<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>

#id {
  visibility: hidden;
}

document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}

if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}