Multi-level Dropdown Record Plugin – jQuery Dropdown Submenu

Dropdown Submenu is a jQuery plugin that converts a <choose> aspect with choice teams right into a multi-level dropdown checklist, which improves usability, search engine optimisation, and helps make the choices extra accessible.

Extra Options:

• Responsive. Auto disables on cell gadgets.
• Helps icons and HTML content material in choices.
• Permits you to add/update choices.
• Plenty of customization choices.

See Additionally:

use it:

1. Obtain and cargo the Dropdown Submenu plugin’s recordsdata.

<hyperlink rel="stylesheet" href="/path/to/dropdown-submenu-dist.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dropdown-submenu.min.js"></script>

2. Simply name the perform dropdownSubmenu in your choose aspect and the plugin will handle the remainder.

<choose id="instance">
  <choice worth="">Select your OS:</choice>
  <optgroup label="PC">
    ...
  </optgroup>
  <optgroup label="Mac">
    ...
  </optgroup>
  <choice worth="different">Different</choice>
</choose>

$(perform(){
  $("#instance").dropdownSubmenu();
});

3. Add icons to the start of the choices utilizing the data-icon attribute.

<optgroup label="Mac" data-icon="mac.png">
<choice worth="yosemite" data-icon="mac.png">Yosemite</choice>

4. The plugin additionally permits HTML content material (URL encoded) in choices.

<choice worth="high-sierra" data-html-option="Highpercent20percent3Cstrongpercent3ESierrapercent3Cpercent2Fstrongpercent3Epercent20percent28HTMLpercent29">Excessive Sierra</choice>

5. All plugin choices to customise the dropdown checklist.

$("#instance").dropdownSubmenu({

  // disable the plugin when the display screen measurement is smaller than this worth
  minScreenWidth:500,

  // Watch programmatic modifications
  watchDisabled: true,  
  watchSelectClasses: true,
  watchHidden: true,  
  watchChangeVal: false,
  
  // copy choice's courses
  copyOptionClasses:   true,
  
  // default CSS courses
  wrapClass: "dropdown-submenu-wrapper", 
  tuneClass: "dropdown-submenu-skin", 
  customClass: "", 
  
});

6. API strategies.

// refresh
$("#instance").dropdownSubmenu('refresh');

// refresh the width
$("#instance").dropdownSubmenu('refresh-width');

// destroy
$("#instance").dropdownSubmenu('destroy');

This superior jQuery plugin is developed by CarlesRever. For extra Superior Usages, please verify the demo web page or go to the official web site.