UvumiTools Dropdown Menu

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 <ul> 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 <ul>) is rendred horizontally, while the sub-menus (inner <ul> 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 scripts for every 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.

Requires no Javascript knowledge: Simply call the script, passing the ID of the unordered list you want to transform into a menu. Easy!
Menu configuration in HTML: The script fully relies on existing HTML to build the menu. The way you modify the unordered list will directly affect your menu layout. You can remodel your menu with a few cut/pastes.
Non-obtrusive: Since the script doesn't generate any new HTML but only moves things around a bit, everything is visible and clickable from the beginning. The menu structure, the links to the rest of your site, everything will be accessible and indexable by search engines and users who disable Javascript in their browsers.
Easy to update: Adding a new item to the menu is as simple as creating a new <li> element, with a link inside. Simple!
Cross-Browser Compatible: Tested in the major browsers: Firefox 2 & 3, Internet Explorer 6 & 7, Opera 9, Safari 3. All on Windows systems. We didn't get a chance to test on Mac or Linux. If anyone encounters any problems in other browsers/operating systems, please let us know. We only support real browsers -- No need to email us with IE4 or AOL issues because, well, we don't really care.
Cutomizable with CSS: There is no new HTML element generated, and for the existing code, only the positioning is altered. Everything else, like colors and sizes can be changed easily with CSS.
Animated: Helps your site feel more sturdy and professional.

What you'll need:

A website where you can include javascripts: Sounds obvious, but some platforms don't allow users to include <script> tags. If you are your own webmaster, you're set. Otherwise, send a link to this page to your webmaster.
A valid unordered list: By "valid", we mean one that satisfies the standards of a strict doctype.
Mootools 1.2: To use this plugin you'll need Mootools 1.2, but if you are already using another javascript framework like Prototype or JQuery, you may have to decide which one you want to keep because those frameworks were not designed to work together, and they ofen conflict with each other. And yes, you actually do need version 1.2 of Mootools. If you are already using an older version of Mootools then this plugin will not work without an upgrade. Sure, upgrading is a hassle, but trust us, it's worth it in the long run.
Mootools Dependencies: If your website already contains some Mootools 1.2 stuff (from this wesite or elsewhere), that's even better because you can use a single Mootools library for everything. All you'll need is the DowpDown script, and to make sure your library contains the following classes:
- Core
  - Core
  - Browser
- Native
  - Array
  - Function
  - Number
  - String
  - Hash
  - Event
- Class
  - Class
  - Class.Extra
- Element
  - Element
  - Element.Event
  - Element.Style
  - Element.Dimensions
- Utilities
  - DomReady
- Fx
  - Fx
  - Fx.CSS
  - Fx.Transitions (only if you're not going to use the default transition)
- Plugins
  - Fx.Elements

Initialization

var myMenu = new UvumiDropdown(menuId,options);

Arguments

menuId: The id of the <ul> to transform. In case you pass the id of another element, it will look for the first child <ul> inside this element.
options: Originally there were no option for this script, but we thought you might want to control the drop down animation. Like the name says, options are optional. For the live example on top of this page, no argument was passed.

Options

duration: Animation effect duration, in milliseconds, when the a sub-menu opens. Default is 250.
transition: Receives a mootools Fx.Transitions object. Default is Fx.Transitions.linear. Checkout the examples to see how to change the transition.

How To

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

<head>

<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dropdown.css"/>
<script type="text/javascript" src="js/mootools-for-dropdown.js"> </script>
<script type="text/javascript" src="js/UvumiDropdown.js"> </script>

</head>

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

<ul id="dropdown-menu" class="dropdown" >

<li>

</li>
<li>

<a href="order.html">Order</a>

</li>
<li>

<a href="tools.html">Tools</a>

</li>
<li>

<a href="stats.html">Stats</a>

</li>

</ul>

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

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

</script>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>

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

</script>

</head>
<body>

<li>

</li>
<li>

<a href="order.html">Order</a>

</li>
<li>

<a href="tools.html">Tools</a>

</li>
<li>

<a href="stats.html">Stats</a>

</li>

</ul>

</body>

</html>

this is what we get:

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

Lets add another <ul> inside the first. It has to be inside a <li>, or it would not be valid HTML. Let's put it inside the "Tools" <li>, right after the link

<li>

</li>
<li>

<a href="order.html">Order</a>

</li>
<li>

<a href="tools.html">Tools</a>

<ul>

<li>

<a href="tools1.html">Tools 1</a>

</li>
<li>

<a href="tools2.html">Tools 2</a>

</li>
<li>

<a href="tools3.html">Tools 3</a>

</li>
<li>

<a href="tools4.html">Tools 4</a>

</li>

</ul>

</li>
<li>

<a href="stats.html">Stats</a>

</li>

</ul>

Now, without modifying any javascript, just refresh your document, and you should get something like this:

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), just add more <ul> inside the one you just create.

<li>

</li>
<li>

<a href="order.html">Order</a>

</li>
<li>

<a href="tools.html">Tools</a>
<ul>

<li>

<a href="category1.html">Category 1</a>

<ul>

<li>

</li>
<li>

</li>
<li>

</li>
<li>

</li>

</ul>

</li>
<li>

<a href="category2.html">Category 2</a>

</li>
<li>

<a href="category3.html">Category 3</a>

</li>
<li>

<a href="category4.html">Category 4</a>

</li>

</ul>

</li>
<li>

<a href="stats.html">Stats</a>

</li>

</ul>

Just refresh and enjoy.

Then you can add more and more sub-menus and you'll get something like the first example at the beginning of the page.

Finally you can play with the options, to make the animation behave differently. But don't overdo it, when animations are too long and complex, it gets annoying very quickly.
You can find details about Fx.Transitions here.

var myMenu = new UvumiDropdown("dropdown-menu",{

duration:500, //default was 250ms
duration:Fx.Transitions.Bounce.easeOut //default was Fx.Transitions.linear

});

</script>

May get bigger than the window can display: If you have many sub-menus and you expand them all, you might reach the right or bottom border of the window. One way to avoid that is to not have dozens of sub-sections in your website, in which the user would get lost anyway. Same thing if the menu is inside a container.

Mootools Library for UvumiTools Dropdown Menu. Limited MooTools version custom-built for optimal UvumiTools Dropdown performance. This version of the MooTools library only contains those classes necessary for the Dropdown plugin, so if you want to use this plugin with other Mootools plugins (including other UvumiTools Plugins), we recommend you build your own library from scratch on the Mootools website. Make sure you use version 1.2 and that you include all the classes described in the Requirements section above.

Compressed Dropdown. If you don't want to mess with the code, select this.

Uncompressed and Commented UvumiTools Dropdown Plugin. If you are familiar with Mootools and think you can improve our plugin, help yourself.

CSS file. This includes a commented style sheet, and the menu arrow images.

Demo. Contains the HTML code to generate the same menu as above. Make sure you have the other required files.

20080903 - Version 1.0.1: Bug fix: Z-index issue made menu appear behind other objects in the document under certain coniditions. See forum thread for more details on this fix.
20080728 - Version 1.0.0: Initial release. Stable with Mootools 1.2.

UvumiTools Dropdown Menu

Description

Features

Requirements

How To

Initialization

Arguments

Options

How To

Known Issues

Download

Change Log