Change style:

Big /
Small

Posted By

peckham on 01/30/11

Tagged

menu select dropdown replace jquery

Versions (?)

Who likes this?

11 people have marked this snippet as a favorite

frenchflair
Some0ne
Tyde
crutzdesigns
ApeWare
b2inuni
TrekSoft
macodev
RichVRed
lookingforsome
Abiotic

jQuery fancy select dropdown menu

/ Published in: jQuery

URL: http://www.ekelschot.eu/demo/fancydropdown

The option elements in the original select may provide an image and a second line of text by using a data-img and a data-info attribute.

Highlighted TextExpand

/*

Copyright (c) 2011 Koen Ekelschot

---

Version 1.0.1 - Jan. 30, 2011

A jQuery plugin which replaces <select> elements with a fancy dropdown menu

Usage:

- $(selector).fancyDropdown(); //returns jQuery chainable object
   
   Prerequisites:
   
   - jQuery hasEventListener plugin by sebastien-p: https://github.com/sebastien-p/jquery.hasEventListener

*/

(function($) {
 	$.fn.fancyDropdown = function() {
		return this.each(function() {
			var el = $(this);
			var id = $(this).attr('id');
			el.hide();
			//create needed HTML
			var html = '<div class="dropdown" id="'+id+'_dropdown"></div><ul class="dropdownlist" id="'+id+'_dropdownlist">';
			$('option', el).each(function() {
				var realvalue = $(this).attr("value");
				var img = $(this).attr("data-img");
				var info = $(this).attr("data-info");
				if (info == null) {
					html += '<li data-realvalue="'+realvalue+'"><div class="imgholder"><img src="'+img+'" /></div><p class="no-info"><strong>'+$(this).text()+'</strong></p><div class="clearfix"></div>';
				} else {
					html += '<li data-realvalue="'+realvalue+'"><div class="imgholder"><img src="'+img+'" /></div><p><strong>'+$(this).text()+'</strong><br />'+info+'</p><div class="clearfix"></div>';
				}
			});
			html += '</ul>';
			el.after(html);
			//set initial values
			var initoption = $('li[data-realvalue="'+el.val()+'"]', $('#'+id+'_dropdownlist'));
			initoption.attr('class', 'active');
			$('#'+id+'_dropdown').attr('data-realvalue', initoption.attr('data-realvalue')).html(initoption.html());
			//bind click event
			if ($("body").hasEventListener("click.customdropdown").length == 0) {
				//bind the click event only once
				$('body').bind('click.customdropdown', function(e) {
					var elements = $(e.target).parents().andSelf();
					var dropdown = elements.filter('.dropdown');
					var dropdownlist = elements.filter('.dropdownlist');
					if (dropdown.length == 0 && dropdownlist.length == 0) {
						//not clicked on .dropdown or .dropdownlist, hide .dropdownlist
						$(".dropdownlist").fadeOut('fast');
						$(".dropdown").removeClass('active_dropdown');
					} else {
						if (dropdown.length != 0) {
							//clicked on .dropdown
							var dropdownid = $(dropdown[0]).attr('id');
							if ($("#"+dropdownid).hasClass('active_dropdown')) {
								//close all .dropdownlist
								$(".dropdownlist").fadeOut('fast');
								$(".dropdown").removeClass('active_dropdown');
							} else {
								//close all .dropdownlist
								$(".dropdownlist").fadeOut('fast');
								$(".dropdown").removeClass('active_dropdown');
								//and open the clicked one
								$("#"+dropdownid).addClass('active_dropdown');
								$("#"+dropdownid+"list li.active").addClass('hover').siblings().removeClass('hover');
								var pos = $(dropdown[0]).position();
								$("#"+dropdownid+"list").css({
									top: (pos.top+$(dropdown[0]).outerHeight())+'px',
									left: pos.left+'px'
								}).fadeIn('fast');
							}
						} else {
							//clicked on .dropdownlist
							var dropdownid = $(dropdownlist[0]).attr('id').slice(0, -4);
							var li = $(elements.filter('li')[0]);
							$('#'+dropdownid).removeClass('active_dropdown').attr('data-realvalue', li.attr('data-realvalue')).html(li.html());
							li.addClass('active').siblings().removeClass('active');
							$(dropdownlist[0]).fadeOut('fast');
							//reflect change to original <select> element
							$("#"+dropdownid.slice(0, -9)).val(li.attr('data-realvalue'));
						}
					}
				});
			}
			//add hover states
			$(".dropdownlist li").live('mouseover', function() {
				$(this).addClass("hover").siblings().removeClass("hover");
			});
			$(".dropdown").live('mouseover', function() {
				$(this).addClass('hover_dropdown');
			}).live('mouseout', function() {
				$(this).removeClass('hover_dropdown');
			});
		});
	};
})(jQuery);

Report this snippet Tweet

Comments

Subscribe to comments

Posted By: crutzdesigns on February 4, 2011

Pretty slick looking drop down's :)

Posted By: TrekSoft on May 26, 2012

Hi - this is a great snippet and just what I was looking for. Is it alright to use for my web project?

Posted By: peckham on October 14, 2012

Sorry for the late response. You can do whatever you want with it :)

Posted By: Jules on November 25, 2012

Cool script. Works nice on jQuery 1.4.4 But with jQuery 1.8.3 there is a nasty bug: if you use more than one select element on the same page, each dropdown always instantaneously closes right after it opened. Any idea how to fix this?

You can easily reproduce the error by including jQuery 1.8.3 instead of 1.4.4 on the example page.

Posted By: orip on December 10, 2012

Jules - there's a version patched for jQuery 1.8+ over here: https://github.com/orip/jquery.fancydropdown

It also removes the jquery.hasEventHandler dependency.

Comment:

You need to login to post a comment.