Friday, February 3, 2023
HomejQueryMulti-level Dropdown Record Plugin - jQuery Dropdown Submenu

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 label="Mac">
  <choice worth="different">Different</choice>

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.


  // disable the plugin when the display screen measurement is smaller than this worth

  // 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

// refresh the width

// 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.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments