mootools menu document.id to document.getElements

Question

I have a small mootools dropdown menu script. And it works great for single div. How can I fix this class for wowk by class (not by id) and pass multiple divs for multiple menus?

HTML (Single menu):

<ul id="nav">
   <li>
     <a href="#">Link1</a>
     <ul>
        <li>
          <a href="#">Sub Link1</a>
        </li>
     </ul>
   </li>
   <li>
     <a href="#">Link2</a>
   </li>
</ul>

Call menu class:

document.id('nav').MooDropMenu({
   onOpen: function(el){
      el.fade('in');
      el.getParent('li').addClass('dropdown');
   },
   onClose: function(el){
      el.fade('out');
      el.getParent('li').removeClass('dropdown');
   },
   onInitialize: function(el){
      el.fade('hide').set('tween', {duration:0});
   }
});

And this for single document id. How can I convert source for multiple divs using .getElements().

MooDropMenu class:

var MooDropMenu = new Class({

    Implements: [Options, Events],

    options: {
        onOpen:         function(el){el.removeClass('close').addClass('open')},
        onClose:        function(el){el.removeClass('open').addClass('close')},
        onInitialize:   function(el){el.removeClass('open').addClass('close')},
        mouseoutDelay: 100,
        mouseoverDelay: 0,
        listSelector: 'ul',
        itemSelector: 'li',
        openEvent: 'mouseenter',
        closeEvent: 'mouseleave'
    },

    initialize: function(menu, options, level){
        this.setOptions(options);
        options = this.options;

        var menu = this.menu = document.id(menu);

        var that = this;

        menu.getElements(options.itemSelector + ' > ' + options.listSelector).each(function(el){

            this.fireEvent('initialize', el);

            var parent = el.getParent(options.itemSelector),
                timer;

            parent.addEvent(options.openEvent, function(){
                parent.store('DropDownOpen', true);

                clearTimeout(timer);
                if (options.mouseoverDelay) timer = this.fireEvent.delay(options.mouseoverDelay, this, ['open', el]);
                else this.fireEvent('open', el);

            }.bind(this)).addEvent(options.closeEvent, function(){
                parent.store('DropDownOpen', false);

                clearTimeout(timer);
                timer = (function(){
                    if (!parent.retrieve('DropDownOpen')) this.fireEvent('close', el);
                }).delay(options.mouseoutDelay, this);

            }.bind(this));

        }, this);
    },

    toElement: function(){
        return this.menu
    }

});

/* So you can do like this $('nav').MooDropMenu(); or even $('nav').MooDropMenu().setStyle('border',1); */
Element.implement({
    MooDropMenu: function(options){
        return this.store('MooDropMenu', new MooDropMenu(this, options));
    }
}); 

Answer 1

MooDropMenu class works on multiple dropdowns. Just change the element id to classes, <ul class="nav">, and use:

document.getElements('.nav').MooDropMenu({

Note: remember to change the CSS from # to . also.

Fiddle