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

CSS code for Vertical-Horizontal Menu

Vertical-Horizontal menu

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Recursive function to create Multi-Level Menu in JavaScript

Last accessed pages

  1. Detect when page visibility state is changed (245)
  2. Node.js Move and Copy Directory (15823)
  3. Working with MySQL Database (2265)
  4. Read Excel file data in PHP - PhpExcelReader (90423)
  5. SHA1 Encrypt data in JavaScript (27933)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (162)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (99)
  3. SHA1 Encrypt data in JavaScript (78)
  4. Read Excel file data in PHP - PhpExcelReader (74)
  5. Create simple Website with PHP (70)