FancySelect demo page

A non-obtrusive image dropdown menu that extends and replaces a standard HTML Select control.
Requires Mootools Core 1.4.1 or later.
Download and HowTo on Mootools Forge, sources and issues on GitHub, full documentation here.

Simplest example, pick a fruit:   Apple Banana Cherries Lemon Strawberry Watermelon   Detach Toggle

<select name="fruits" id="fruits">
	<option value="1" data-image="Graphics/Fruits/Apple.png">Apple</option>
	<option value="2" data-image="Graphics/Fruits/Banana.png">Banana</option>
	...
</select>

$('fruits').fancySelect();

Only pictures, yummy!   Cake Cheesecake Croissant Donut   Detach Toggle

<select name="yummy" id="yummy">
	<option value="a" data-image="Graphics/Fruit/Cake.png" data-alt="This is a cake">Cake</option>
	<option value="b" data-image="Graphics/Fruit/Cheesecake.png" data-alt="Cheesecake!">Cheesecake</option>
	...
</select>

$('yummy').fancySelect({
	showText: false,
	showImages: true,
	className: 'fancy-select fancy-select-big'
});

This is a text-only version:   Lorem ipsum Dolor sit amet Consectetuer Adipiscing   Detach Toggle

<select name="textonly" id="textonly">
	<option value="1">Lorem ipsum</option>
	<option value="2">Dolor sit amet</option>
	...
</select>

$('textonly').fancySelect({
	showText: true,
	showImages: false
});