jQuery fancy select dropdown menu


/ Published in: jQuery
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  1. /*
  2.  
  3.   Copyright (c) 2011 Koen Ekelschot
  4.  
  5.   ---
  6.  
  7.   Version 1.0.1 - Jan. 30, 2011
  8.  
  9.   A jQuery plugin which replaces <select> elements with a fancy dropdown menu
  10.  
  11.   Usage:
  12.  
  13.   - $(selector).fancyDropdown(); //returns jQuery chainable object
  14.  
  15.   Prerequisites:
  16.  
  17.   - jQuery hasEventListener plugin by sebastien-p: https://github.com/sebastien-p/jquery.hasEventListener
  18.  
  19. */
  20.  
  21. (function($) {
  22. $.fn.fancyDropdown = function() {
  23. return this.each(function() {
  24. var el = $(this);
  25. var id = $(this).attr('id');
  26. el.hide();
  27. //create needed HTML
  28. var html = '<div class="dropdown" id="'+id+'_dropdown"></div><ul class="dropdownlist" id="'+id+'_dropdownlist">';
  29. $('option', el).each(function() {
  30. var realvalue = $(this).attr("value");
  31. var img = $(this).attr("data-img");
  32. var info = $(this).attr("data-info");
  33. if (info == null) {
  34. 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>';
  35. } else {
  36. html += '<li data-realvalue="'+realvalue+'"><div class="imgholder"><img src="'+img+'" /></div><p><strong>'+$(this).text()+'</strong><br />'+info+'</p><div class="clearfix"></div>';
  37. }
  38. });
  39. html += '</ul>';
  40. el.after(html);
  41. //set initial values
  42. var initoption = $('li[data-realvalue="'+el.val()+'"]', $('#'+id+'_dropdownlist'));
  43. initoption.attr('class', 'active');
  44. $('#'+id+'_dropdown').attr('data-realvalue', initoption.attr('data-realvalue')).html(initoption.html());
  45. //bind click event
  46. if ($("body").hasEventListener("click.customdropdown").length == 0) {
  47. //bind the click event only once
  48. $('body').bind('click.customdropdown', function(e) {
  49. var elements = $(e.target).parents().andSelf();
  50. var dropdown = elements.filter('.dropdown');
  51. var dropdownlist = elements.filter('.dropdownlist');
  52. if (dropdown.length == 0 && dropdownlist.length == 0) {
  53. //not clicked on .dropdown or .dropdownlist, hide .dropdownlist
  54. $(".dropdownlist").fadeOut('fast');
  55. $(".dropdown").removeClass('active_dropdown');
  56. } else {
  57. if (dropdown.length != 0) {
  58. //clicked on .dropdown
  59. var dropdownid = $(dropdown[0]).attr('id');
  60. if ($("#"+dropdownid).hasClass('active_dropdown')) {
  61. //close all .dropdownlist
  62. $(".dropdownlist").fadeOut('fast');
  63. $(".dropdown").removeClass('active_dropdown');
  64. } else {
  65. //close all .dropdownlist
  66. $(".dropdownlist").fadeOut('fast');
  67. $(".dropdown").removeClass('active_dropdown');
  68. //and open the clicked one
  69. $("#"+dropdownid).addClass('active_dropdown');
  70. $("#"+dropdownid+"list li.active").addClass('hover').siblings().removeClass('hover');
  71. var pos = $(dropdown[0]).position();
  72. $("#"+dropdownid+"list").css({
  73. top: (pos.top+$(dropdown[0]).outerHeight())+'px',
  74. left: pos.left+'px'
  75. }).fadeIn('fast');
  76. }
  77. } else {
  78. //clicked on .dropdownlist
  79. var dropdownid = $(dropdownlist[0]).attr('id').slice(0, -4);
  80. var li = $(elements.filter('li')[0]);
  81. $('#'+dropdownid).removeClass('active_dropdown').attr('data-realvalue', li.attr('data-realvalue')).html(li.html());
  82. li.addClass('active').siblings().removeClass('active');
  83. $(dropdownlist[0]).fadeOut('fast');
  84. //reflect change to original <select> element
  85. $("#"+dropdownid.slice(0, -9)).val(li.attr('data-realvalue'));
  86. }
  87. }
  88. });
  89. }
  90. //add hover states
  91. $(".dropdownlist li").live('mouseover', function() {
  92. $(this).addClass("hover").siblings().removeClass("hover");
  93. });
  94. $(".dropdown").live('mouseover', function() {
  95. $(this).addClass('hover_dropdown');
  96. }).live('mouseout', function() {
  97. $(this).removeClass('hover_dropdown');
  98. });
  99. });
  100. };
  101. })(jQuery);

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.