UvumiTools Dropdown Menu with Mootools

The UvumiTools Dropdown Menu is the menu featured on this website. It is a very simple multi-level menu built from an HTML unorderd list, using Mootools Javascript Framework. We needed a simple and lightweight menu that can be easily updated by simply editing a

    HTML element.

    Horizontal menus are great because they are small, but the number of items they can contain is limited to the document’s width. Dropdown menus allow you to squeeze many items in a thin horizontal menu by using sub-menus; The main menu (the top-level

      ) is rendred horizontally, while the sub-menus (inner

        elements) are displayed as verticle sub-menus when hovered. All you need is an unordered list, with links to sections of your site, and our Dowpdown script.

        We are aware that there are many dropdown menu scripts for every Javascript framework out there, but we wouldn’t use someone else’s script on a plugin site, and we wanted to make one according to our requirements: non-obtrusive, based on valid HTML, cross-browser compatible and slylable with CSS.

         

        How To

         

        First, you simply import the files provided in the zip archive into your document. While you can insert tags anywhere, we recommend you put them inside the tag:

         

        Then the scripts needs an unordered list to build the menu. Let’s start with a single level list.

         

        Then we are ready to execute the script. We just add the following code in our document.

         
        var myMenu = new UvumiDropdown("dropdown-menu");

        If we put everything together, we get something like this:

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

        var myMenu = new UvumiDropdown("dropdown-menu");

         

        It transformed our vertical list into a horizontal menu. This could have been achieved with CSS only, but it gets more interesting when we start adding sub-menus.

        Let’s add another

          inside the first. It has to be inside a

        • , or it would not be valid HTML. Let’s put it inside the “Tools”
        • , right after the link

           

          Much better. But let’s say you’re going to have dozens of UvumiTools plugins. You can’t just have them all unfold vertically, you’d get a very tall menu. You can sort those tools by categories. To create categories (or any kind of sub-menus), you can add more

            tags inside the one you just created.

             

            Finally you can play with the options, to make the animation behave differently or to enable the click mode. But don’t overdo it, when animations are too long and complex, it can get annoying very quickly.

             
            var myMenu = new UvumiDropdown("dropdown-menu",{
            duration:500, //default was 250ms
            duration:Fx.Transitions.Bounce.easeOut //default was Fx.Transitions.linear
            delay:1000, //default was 500ms
            clickToOpen:true, //default was false
            });

            Sure, let’s display the whole menu vertically this time. There is special CSS file for it, named uvumi-dropdown-vertical.css. You don’t have to use that file of course, but it’s a good base to start from. You need to pass an extra option when you create the object ot enable the vertical mode.

            var myMenu = new UvumiDropdown("dropdown-menu",{
            closeDelay:200,
            mode:'vertical' //default was 'horizontal'
            });
             

            Finally, let’s try a menu written from right to left. All you need is to include a different different CSS file (provided). Basically, this CSS file tells the menu to be written from Right to Left, using the ‘direction’ property, and reverse the side the arrow are pointing to. Everything else is conveniently handled by the script.

            var myMenu = new UvumiDropdown("dropdown-menu");
             

Leave a comment