Multi-level Context Menu With jQuery - sMenus

The sMenus jQuery plugin helps you dynamically render a multi-level context menu from a JavaScript array containing hierarchical data.

How to use it:

1. Load the minified version of the jQuery sMenus plugin after jQuery and we're ready to go.

<link rel="stylesheet" href="/path/to/jquery.sMenus.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.sMenus.js"></script>

2. Define your data in a JavaScript array.

const myData = [
  {
    text:"Menu 1",
    fn:function(){
      console.log(1)
    },
    data:[
      {
        text:"Menu 1.1",
        fn:function(){
          console.log(1.1)
        },        
        data:[
          {
            text:"Menu 1.1.1",
            fn:function(){
              console.log(1.1.1)
            }
          }
        ]
      },
    ]
  },{
    text:"",
  },{
    text:"Menu 2",
    fn:function(){
      console.log(2)
    },        
    data:[
      {
        text:"Menu 2.2",
        fn:function(){
          console.log(2.2)
        }
      },
    ]
  },{
    text:"Menu 3",
    close: false,
    css: "your-class"
    fn:function(){
      console.log(3)
    }
  },
]

3. Generate a context menu from the data and attach it to a specific container.

$("#element").sMenus({
  data: myData
})

4. You can also define the menu data in the sMenu attribute:

<div id="element" sMenu='[
     Your Data Here
     ]'>
</div>

$("#element").sMenus()

5. Customize the appearance of the context menu:

$("#element").sMenus({

  // opacity
  phy:1,

  // fade in/out animation
  inTime:200,
  outTime:200,

  // default CSS selector
  css:"sMenus",

  // whether to close the context menu after an item clicked
  close:true
  
})

---

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