EasyDropDown – great drop-down menu, containing beautiful theme

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

  EasyDropDown Is a jQuery plugin, you can easily be rough set to Select elements can be customized Style drop-down menu, for form or general navigation. And the famous drop plug-ins like Chosen, but it has its own characteristics, such as: simple, semantic markup, compatible form validation, full keyboard control, rolling support, in touch devices relegation for many advantages of native UI etc.

  In addition, provides   Default, Metro, Flat three sets of different style theme, believe to be able to meet your needs.

Article may be of interest to you



How to use:

  The introduction of jquery.easydropdown.min.js not < in the page; select> tag class dropdown:

<select class="dropdown">
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
</select>

  If you are in the   <select> use label tag element, need to add class label:

<select class="dropdown">
	<option class="label">Month</option>
	<option value="1">January</option>
	<option value="2">February</option>
	<option value="3">March</option>
	...
</select>

Custom style

  You can create your own style, to meet the design and the brand you, or use one of the themes of off the shelf. We recommend starting with the default theme and custom. Each drop function has the following basic mark structure:

<div class="dropdown">
	<span class="old">
		<select>...</select>
	</span>
	<span class="selected">Option 1</span>
	<span class="carat"></span>
	<div>
		<ul>
			<li>Option 1</li>
			<li>Option 2</li>
			<li>Option 3</li>
			<li>Option 4</li>
		</ul>
	</div>
</div>

  These class will be automatically added or removed:

Advanced usage

  This can be used, of course you can customize options:

$(function(){
	var $selects = $('select');
						
	$selects.easyDropDown({
		cutOff: 10,
		wrapperClass: 'my-dropdown-class',
		onSelect: function(selected){
			// do something
		}
	});
});

   You can also put the configuration to JSON data format in the data-settings attribute:

<select class="dropdown" 
	data-settings='{"cutOff":6}'>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	..
</select>

  

The plug-in download

The effect of presentation


Article may be of interest to you


This link: EasyDropDown – great drop-down menu, containing beautiful theme

Compiler source: dream sky concern front-end development technologies on webpage design resources sharing

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Harold at November 23, 2013 - 11:47 AM