Custom HTML Drop Downs

talk open source
1

UPDATED
Finished abstracting this as a plugin for jQuery so most of below is useless and I’ll edit in bit, look for post below for new code and demo

I’ve just been experimenting with a way of making custom HTML drop downs. Thought it would be a cool thing to be able to style the way the drop downs look completely with CSS.

This is just a really rough demo using jQuery, I’m going to abstract it into a jQuery plugin so you can use stuff like:


$('select').jdropdown({ selectedClass: 'selected', openEffect: 'show', closeEffect: 'slideUp'});

which would turn all drop downs on the page into custom ones with open and close effects and the selected item has the class selected.

Oh and when I say a rough demo I mean really really rough, bad CSS, a mess of JS. But it’s functional, I’ve left the old dropdown visible, and you can see that by changing the old one the new custom one auto updates.

http://demos.stuartloxton.com/customdropdown/

2

Interesting. I’m always looking for css dropdowns that work across browsers. Does this work in IE6 (I’m on an Apple machine)?

3

^ Not really tested much, works fine in both FF3, IE7 & IE8.

The CSS doesn’t work in IE though, but that’s not the important thing.

4

Update
Here is the abstracted plugin for jQuery.
Demo: http://demos.stuartloxton.com/customdropdown/dev.html
(Again, I’ve left the original drop down visible so you can see that changing one changes the other)

I’m still styling the example so sorry if you catch me mid-change.

It’s all abstracted so there is no page specific code, just a simple


$('#dropdown').jdropdown();

You can have as many of these on the page as you want, each one with custom styles which I’ll try and make a demo of tomorow.

Source Code


jdropdownSettings = {
    class: "",
    selectedClass: 'selected',
    openLabel: '>',
    closeLabel: '<'
}
jQuery.fn.jdropdown = function() {
    console.log(jQuery(this));
    if (jQuery(this).attr('id') == "undefined") {
        i = jQuery('.jdropdown').length + 1;
        id = 'jdropdown-'+i;
    } else {
        id = jQuery(this).attr('id');
    }
    jQuery(this).attr('id', id+'Old');
    jQuery(this).addClass('jdropdownOld');
    jQuery(this).after('<div id="'+id+'" class="jdropdown closed '+jdropdownSettings.class+'"><a class="openTrigger" rel="'+jdropdownSettings.closeLabel+'" href="#">'+jdropdownSettings.openLabel+'</a><ul></ul></div>')
    if(jQuery(this).find('option:selected').length == 0) {
        i = 0;
        jQuery(this).find('option').each(function() {
            if(i == 0) {
                jQuery('#'+id+' ul').append('<li class="'+jdropdownSettings.selectedClass+'"><a href="#" rel="'+jQuery(this).attr('value')+'">'+jQuery(this).text()+'</a></li>');
                i++;
            } else {
                jQuery('#'+id+' ul').append('<li class=""><a href="#" rel="'+jQuery(this).attr('value')+'">'+jQuery(this).text()+'</a></li>');
            }
        });
    } else {
        jQuery(this).find('option').each(function() {
            if(jQuery(this).attr("value") == jQuery(this).parent().find('option:selected').attr("value")) {
                jQuery('#'+id+' ul').append('<li class="'+jdropdownSettings.selectedClass+'"><a href="#" rel="'+jQuery(this).attr('value')+'">'+jQuery(this).text()+'</a></li>');
            } else {
                jQuery('#'+id+' ul').append('<li class=""><a href="#" rel="'+jQuery(this).attr('value')+'">'+jQuery(this).text()+'</a></li>');
            }
        });
    }
    jQuery('#'+id+' ul li:not(.'+jdropdownSettings.selectedClass+')').css('display', 'none');
    jdropdownBind()
}
function jdropdownBind() {
    jQuery('.jdropdown a.openTrigger').click(function() {
        rel = jQuery(this).attr('rel');
        text = jQuery(this).text();
        jQuery(this).attr('rel', text);
        jQuery(this).text(rel);
        if(jQuery(this).parent().hasClass('closed')) {
            jQuery(this).next().find('li').css('display', 'block');
            jQuery(this).parent().removeClass('closed');
            jQuery(this).parent().addClass('open');
        } else {
            jQuery(this).next().find('li:not(.'+jdropdownSettings.selectedClass+')').css('display', 'none');
            jQuery(this).parent().removeClass('open');
            jQuery(this).parent().addClass('closed');
        }
    });
    jQuery('.jdropdown ul li a').click(function() {
        id = jQuery(this).parent().parent().parent().attr("id");
        old = id+'Old';
        value = jQuery(this).attr('rel');
        jQuery(this).parent().parent().find('li.'+jdropdownSettings.selectedClass).removeClass('selected');
        jQuery(this).parent().addClass(jdropdownSettings.selectedClass);
        jQuery('#'+old).find("option[value='"+value+"']").attr("selected", "selected");
        if(jQuery(this).parent().parent().parent().hasClass('open')) {
            jQuery(this).parent().parent().prev().click();
        } else {
            jQuery(this).parent().parent().find('li:not(.'+jdropdownSettings.selectedClass+')').css('display', 'none');
            jQuery(this).parent().css('display', 'block');
        }
        return false;
    });
    jQuery('.jdropdownOld').change(function() {
        old = jQuery(this).attr("id");
        jdropdown = old.replace(/Old$/, '');
        value = jQuery(this).find('option:selected').attr("value");
        console.log(value);
        jQuery('#'+jdropdown+" ul li a[rel='"+value+"']").click();
    });
}
5

Nice, I feel special because I got a sneak preview of this. :smiley: