Multi-level Toolbar Menu Plugin With jQuery - Nice-Menu

The Nice-Menu jQuery plugin helps you create a dynamic, multi-level dropdown menu with support for checkboxes and radio buttons.

With this plugin, you can create a toolbar or site navigation that provides frequently used commands and features for efficient access as you seen on Windows and Mac OS.

How to use it:

1. Add jQuery library and the Nice-Menu plugin's files to the web page.

<link rel="stylesheet" href="tr.menu.css" type="text/css" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="tr.menu.js"></script>

2. Create a container in which the plugin will generate the menu.

<div class="menu" id="MainMenu"></div>

3. Initialize the plugin and create a new Nice-Menu instance.

var niceMenu = new TR.NiceMenu("MainMenu");

4. Add menu items as follows:

var menuFile = niceMenu.AddEntry("File");
menuFile.AddEntry("Save","Ctrl+S", ClickIntrospect);
menuFile.AddEntry("Save As","Shift+Ctrl+C", ClickIntrospect);

var menuRecentDisable = menuFile.AddEntryWithSubMenu("Recent-disable");
menuFile.SetEntryDisable(menuRecentDisable.mId);
menuRecentDisable.AddEntry("Test1","", ClickIntrospect);
var subMenuRecentDisable = menuRecentDisable.AddEntryWithSubMenu("Test2-with submenu");
subMenuRecentDisable.AddEntry("Test2-submenu","", ClickIntrospect);

var menuRecentEnable = menuFile.AddEntryWithSubMenu("Recent-enable");
menuRecentEnable.AddEntry("Test1","", ClickIntrospect);
var subMenuRecentEnable = menuRecentEnable.AddEntryWithSubMenu("Test2-with submenu");
subMenuRecentEnable.AddEntry("Test2-submenu","", ClickIntrospect);

menuFile.AddEntry("Exit","Ctrl+Q", ClickIntrospect);

5. Handle the menu click event.

function ClickIntrospect(){
  console.log("Click on ",this.mName, this);
}

6. The plugin also allows checkboxes and radio buttons in the menu items.

var menuOSL = niceMenu.AddEntry("OSL");

menuOSL.AddEntry("Compile","F5", ClickIntrospect, true);
var menuActivateRenderId = menuOSL.AddEntryCheckBox("Activate Render","F10", ClickIntrospect);

console.log("Check State before checked:", menuOSL.IsEntryCheck(menuActivateRenderId));
menuOSL.SetEntryCheck(menuActivateRenderId);
console.log("Check State after checked:", menuOSL.IsEntryCheck(menuActivateRenderId));

menuOSL.AddEntryNoSelection("<hr>");
menuOSL.AddEntryRadio("RadioGroup1","RadioOption1","F11", ClickIntrospect);
menuOSL.AddEntryRadio("RadioGroup1","RadioOption2","F12", ClickIntrospect);

---

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