usage

<link rel="stylesheet" href="./index.css">

<div class="menu-wrapper">
  <span id="toggle-bar"><i class="fa fa-bars"></i></span>
  <ul class="menu-list"></ul>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="./index.js"></script>

<script >
$(function () {

  var options = {
    data: [
      {authid: 1, pid: null, name: 'node', value: null, icon: 'fa-globe'},
      {authid: 2, pid: null, name: 'facebook', value: null, icon: 'fa-gear'},
      {authid: 3, pid: null, name: 'google', value: null, icon: 'fa-gears'},
      {authid: 4, pid: 1, name: 4, value: 'https://nodejs.org/', icon: 'fa-globe'},
      {authid: 5, pid: 2, name: 5, value: 'https://facebook.github.io/react/', icon: 'fa-globe'},
      {authid: 6, pid: 3, name: 6, value: 'https://angular.io/tutorial', icon: 'fa-globe'},
      {authid: 7, pid: 1, name: 7, value: 'https://angular.io/guide/quickstart', icon: 'fa-globe'},
      {authid: 8, pid: 2, name: 8, value: 'https://angular.cn/guide/quickstart', icon: 'fa-globe'},
      {authid: 9, pid: 3, name: 9, value: 'https://angular.cn/translations/cn/home', icon: 'fa-globe'},
      {authid: 10, pid: 3, name: 10, value: 'https://angular.cn/features', icon: 'fa-globe'},
      {authid: 11, pid: 8, name: 11, value: 'https://angular.cn/docs', icon: 'fa-globe'},
      {authid: 12, pid: 7, name: 12, value: 'https://angular.cn/resources', icon: 'fa-globe'},
      {authid: 13, pid: 6, name: 13, value: 'https://angular.cn', icon: 'fa-globe'},
      {authid: 14, pid: 6, name: 14, value: 'https://www.github.com/angular/angular', icon: 'fa-globe'},
      {authid: 15, pid: 5, name: 15, value: 'https://angular.io/features', icon: 'fa-globe'},
      {authid: 16, pid: 4, name: 16, value: 'https://angular.io/events', icon: 'fa-globe'},
      {authid: 17, pid: 10, name: 17, value: 'https://angular.io/resources', icon: 'fa-globe'},
      {authid: 18, pid: 10, name: 18, value: 'https://angular.io/api', icon: 'fa-globe'},
      {authid: 19, pid: 10, name: 19, value: 'https://angular.io/docs', icon: 'fa-globe'},
      {authid: 20, pid: 19, name: 20, value: 'https://angular.io/cli', icon: 'fa-globe'},
      {authid: 21, pid: 19, name: 21, value: 'https://angular.io/cli/add', icon: 'fa-globe'},
      {authid: 22, pid: 19, name: 22, value: 'https://angular.io/cli/build', icon: 'fa-globe'},
      {authid: 23, pid: 22, name: 23, value: 'https://angular.io/lint', icon: 'fa-globe'},
      {authid: 24, pid: 22, name: 24, value: 'https://angular.io/cli/new', icon: 'fa-globe'},
      {authid: 25, pid: 24, name: 25, value: 'https://angular.io/cli/run', icon: 'fa-globe'},
    ]
  };

  $('.menu-list').navs(options);

  // OR

  // navs(options);

  // OR

  // $('.menu-list').navs(Object.assign({}, options, {
  //   selector: '.menu-list',
  //   primaryKey: 'authid',
  //   parentId: 'pid',
  //   text: 'name',
  //   container: '.menu-wrapper'
  // }));

  // OR

  // navs(Object.assign({}, options, {
  //   selector: '.menu-list',
  //   primaryKey: 'authid',
  //   parentId: 'pid',
  //   text: 'name',
  //   container: '.menu-wrapper'
  // }));



  // If you want to select a menu item, you can call the select method.

  // $('.menu-list').navs.select('https://angular.io/cli/new');
  // OR
  // navs.select('https://angular.cn/resources');

});
</script>

navs options

All options are customizable.

  var defaults = {
    selector: '.menu-list', // The container you want to place the menu.
    primaryKey: 'authid', // {authid: 1, pid: null, name: 'node', ...}.authid
    parentId: 'pid', // {authid: 1, pid: null, name: 'node', ...}.pid
    text: 'name', // {authid: 1, pid: null, name: 'node', ...}.name
    container: '.menu-wrapper', // the outer container of menu
    mini: { // toggle small screen
      toggle: {
        id: '#toggle-bar',
        className: 'mini-toggle'
      },
      wrapperClass: 'mini-wrapper'
    },
    step: { // style.paddingLeft
      dataName: 'step',
      min: 15,
      max: 20
    },
    levelOne: { // Used to distinguish menu levels
      dataName: 'level',
      selectedClass: 'level-1-selected'
    },
    itemSelected: {
      defaultClass: 'menu-selected', // Not first level menu style(submenu item style)
      animatedClass: 'rotate-90' // for options.arrow
    },
    arrow: {
      baseClass: 'menu-icon fa ',
      defaultClass: 'bars',
      rightClass: 'fa-chevron-right',
      moreBase: 'menu-more fa '
    },
    items: { // recommend different elements
      item: 'a', // If it is not an a element, then clicking on the element will not jump to the new page.
      itemParent: 'li',
      itemWrapper: 'ul'
    },
    data: []
  };