MooSelectMenu

HTML

<div id="action-menu"></div>

CSS

.mookSelectMenu {
    color: #000;
    display: block;
    padding: 0.5em;
    font-weight: normal;
    font-size: 1.0em;
    border-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

JavaScript

var mookSelectMenu = new Class({
    Implements: [Options, Events],
    options: {
        title: "Select an Action..."
        /*  onSelect: $empty */
    },
    initialize: function(container, menuItems, options) {
        this.setOptions(options);
        this.container = $(container);
        this.menuItems = menuItems;
        this.title = this.options.title;
        this.createMenu();
    },
    createMenu: function() {
        var el = new Element('select', {
            id: 'mookSelectMenu',
            class: 'mookSelectMenu',
            events: {
                'change': function(){
                    var item = el.getElement(':selected').get('value');
                    this.fireEvent('select', item);
                }.bind(this)
            }
        }).adopt(
            new Element('option', {
                id: 'none',
                value: 'none',
                disabled: 'disabled', // IE8+ only
                text: this.title
            }),
            this.createOptions()
        ).inject(this.container, 'top');
    },
    /* internal function to create option entries */
    createOptions: function() {
        var optArray = new Array();
        this.menuItems.each(function(item, index) {
            var el = new Element('option', {
                id: item['id'],
                value: item['id'],
                text: item['text']
            });
            optArray.push(el);
        });
        return optArray;
    }.protect()
    
});

new mookSelectMenu($('action-menu'),
    [
        {id: 'action-1', text: 'First action'},
        {id: 'action-2', text: 'Second action'},
        {id: 'action-3', text: 'Third action'}
    ],                          
    {
        onSelect: function(option) {
            switch (option) {
                case 'none':
                    // for display only
                    break;
                 case 'action-1':
                    alert("You selected action 1");
                    break;
  ...