【jQuery】マルチレベルメニュープラグインjQuery Dropdown

jQuery Dropdownはフォームを使ったマルチレベルのメニューのためのjQueryプラグイン。

Usage

必要なCSS,JS

<link rel="stylesheet" type="text/css" href="./css/dropdown.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./js/jquery.dropdown.min.js"></script>

マークアップ

<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

JAVASCRIPT

$(function() {
$('select, ul').dropdown();
});

Options

INITIALISING

$('select').dropdown({
multiple: true,
toggleText: 'Select items'
});

dropdown

<select multiple data-dropdown='{ "multiple": true, "toggleText": "Select items" }'>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

OPTION

  1. animation
  2. speed
  3. autoClose
  4. autoResize
  5. autoToggle
  6. autoTitle
  7. nested
  8. multiple
  9. keyboard
  10. margin
  11. toggleText
  12. titleText
  13. backText
  14. closeText
  15. classes
  16. templates
  17. toggleElem
  18. selectParents

CLASSES

{
dropdown:       'dropdown',
overlay:        'dropdown-overlay',
// Menu
mainMenu:       'dropdown-main-menu',
menuObject:     'dropdown-menu',
menuWrapper:    'dropdown-menu-wrapper',
menuContainer:  'dropdown-menu-container',
menuHeader:     'dropdown-header',
menuTitle:      'dropdown-title',
menuLabel:      'dropdown-label',
menuDivider:    'dropdown-divider',
menuMask:       'dropdown-mask',
menuParent:     'dropdown-parent',
menuChild:      'dropdown-child',
menuList:       'dropdown-list',
menuItem:       'dropdown-item',
menuLink:       'dropdown-link',
menuText:       'dropdown-text',
menuAbove:      'dropdown-above',
// Back
backButton:     'dropdown-back',
backText:       'dropdown-text',
backIcon:       'dropdown-icon',
// Toggle
toggleButton:   'dropdown-toggle',
toggleText:     'dropdown-text',
toggleIcon:     'dropdown-icon',
// Close
closeButton:    'dropdown-close',
closeText:      'dropdown-text',
closeIcon:      'dropdown-icon',
// Icons
iconPrev:       'dropdown-icon',
iconNext:       'dropdown-icon',
// States
above:          'dropdown-above',
below:          'dropdown-below',
open:           'dropdown-open',
menuOpen:       'dropdown-menu-open',
closed:         'dropdown-closed',
disabled:       'dropdown-disabled',
opening:        'dropdown-opening',
closing:        'dropdown-closing',
animating:      'dropdown-animating',
resize:         'dropdown-resizing',
loading:        'dropdown-loading',
menuOpening:    'dropdown-menu-opening',
menuClosing:    'dropdown-menu-closing',
selected:       'dropdown-selected',
selectedParent: 'dropdown-parent-selected',
focused:        'dropdown-focus'
pageOpen:       'dropdown-is-open',
pageOpenBefore: 'dropdown-before-open',
pageOpening:    'dropdown-is-opening',
pageClosing:    'dropdown-is-closing'
}

TEMPLATES

{
dropdown:      '<div />',
overlay:       '<div />',
// Menu
menuObject:    '<div />',
menuWrapper:   '<div />',
menuContainer: '<nav />',
menuHeader:    '<header />',
menuTitle:     '<div />',
menuMask:      '<div />',
menuList:      '<ul role="menu" />',
menuItem:      '<li role="presentation" />',
menuLabel:     '<li role="presentation" />',
menuDivider:   '<li role="presentation" />',
menuLink:      '<a href="#" role="menuitem" />',
menuText:      '<span />',
// Toggle
toggleButton:  '<a href="#" />',
toggleText:    '<span />',
toggleIcon:    '<span />',
// Back
backButton:    '<a href="#" title="Back" />',
backText:      '<span />',
backIcon:      '<span />',
// Close
closeButton:   '<a href="#" title="Close" />',
closeText:     '<span />',
closeIcon:     '<span />',
// Icons
iconPrev:      '<span />',
iconNext:      '<span />'
}

MIT

 
jQuery Dropdown

【jQuery】マルチレベルメニュープラグインjQuery Dropdown

  • LATEST
  • RELATED
  • POPULAR