jQuery

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

October 14, 2016
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
Demo/Download