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

CSS code for Vertical-Horizontal Menu

Vertical-Horizontal menu

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Recursive function to create Multi-Level Menu in JavaScript

Last accessed pages

  1. PHP getElementById and getElementsByTagName (33045)
  2. Sending data with GET and POST in the same request (4726)
  3. Contact page - CoursesWeb (27711)
  4. Tabs effect with CSS (28383)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (34997)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1799)
  2. Contact page - CoursesWeb (1754)
  3. Tabs effect with CSS (1748)
  4. PHP getElementById and getElementsByTagName (827)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (702)