Dynamic Multi-level Menu Plugin With jQuery And JSON - json2menu

json2menu is a jQuery plugin that dynamically renders a multi-level accordion menu using JSON, AJAX, and HTML unordered list.

How to use it:

1. Download and load the jquery.menu.js script after jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.menu.js"></script>

2. Define your own menu data in the menu.json as follows:

[  
  {  
    "text":"jQuery",
    "children":[  
      {  
        "text":"jQuery plugin",
        "click":"https://www.jqueryscript.net"
      },
      {  
        "text":"Most Popular Plugins",
        "click":"https://www.jqueryscript.net/popular/"
      },
      {  
        "text":"Recommended Plugins",
        "click":"https://www.jqueryscript.net/recommended/"
      }
    ]
  },
  {  
    "text":"CSSSCRIPT",
    "children":[  
      {  
        "text":"CSS",
        "children":[  
          {  
            "text":"CSS"
          },
          {  
            "text":"CSS3"
          }
        ]
      },
      {  
        "text":"HTML5"
      },
      {  
        "text":"JavaScript",
        "children":[  
          {  
            "text":"Vanilla JavaScript",
            "click":"https://pl.wikipedia.org/wiki/AJAX"
          }
        ]
      }
    ]
  }
]

3. Create an empty unordered list to place the menu.

<ul>
  
</ul>

4. Call the function on the list and done.

$("ul").menu();

5. The example CSS to style the menu.

ul {
  cursor: pointer;
  list-style-type: none;
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
  color: #223344;
}

ul ul{
  padding-left: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 90%;
  background-color: #223344;
}

ul li {
  display: block;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 86%;
  background-color: #223344;
  margin: 0px !important;
}

ul li div {
  padding: 10px;
  width: 80%;
}

li.hasChildren div {
  background-color: #223344;
  color: #CBE5FF;
  border: 1px solid #aabbcc;
}

li.hasChildren:hover > div {
  transition: all .5s ease-in;
  color: #223344;
  background-color: #CBE5FF;
}

li.noChildren > div {
  background-color: #748290;
  color: #7EBDFC;
}

li.noChildren:hover > div {
  transition: all .5s ease-in;
  color: #748290;
  background-color: #7EBDFC;
}

li {
  background-color: #6ea6dd;
  max-width: 300px;
}

li ul {
  max-width: 300px;
}

5. Customzie the plugin with the following options.

$("ul").menu({
  openSpeed: 500,
  openbg: '#777777',
  mouseoutOpacity: 0.7,
  mouseOut: {
    'opacity': 0.7
  },
  openProp: {
    'speed': 500,
    'css': {
      'opacity': 0.7
    },
    'background-color': '#777777'
  }
});

---

This awesome jQuery plugin is developed by sfra. For more Advanced Usages, please check the demo page or visit the official website.