how to create drop down list using Mootools?

Question

hi, I want to add drop down list to my form (onclick event of a button). I know this is basic of JS. But Please Help! Thanks In Advance!

Answer 1

There is a good example here including all of the necessary HTML, Javascript and CSS.

HTML:

<div id="menu-container">
<ul id="drop_down_menu">
    <li class="menu">Menu 1
        <ul class="links">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
    <li class="menu">Menu 2
        <ul class="links">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </li>
</ul>

The Javascript:

window.addEvent('domready', function(){
$('drop_down_menu').getElements('li.menu').each( function( elem ){
    var list = elem.getElement('ul.links');
    var myFx = new Fx.Slide(list).hide();
    elem.addEvents({
        'mouseenter' : function(){
            myFx.cancel();
            myFx.slideIn();
        },
        'mouseleave' : function(){
            myFx.cancel();
            myFx.slideOut();
        }
    });
})
});