UvumiTools Dropdown Menu
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.
- 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.
- 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.
- NEW! Delayed closing: You can set a delay when the mouse cursor exists a panel, so it waits a bit before it starts closing. Hovering the panel again will simply cancel the closing action if it has not been triggered yet. Even a short delay of half a second is a nice addition because it prevents accidental closing.
- NEW! Delayed open: Works like delayed closing: the mouse must stay on a menu for the minimum duration before it starts opening. If the mouse exists the menu before the timer expires, the menu stays closed. It's interesting to set a low delay to avoid having the menus to open accidently when the cursor flies by.
- NEW! Open on click: This is another popular request. There is now an option to open panels only when they are clicked. Closing will still be triggered when the cursor exits the panel.
- NEW! Support Right to Left text: If the text direction of the document or the menu is set to 'rtl', the menu will open from right to left. This requires a special CSS file. The script checks for the text direction on the body tag and the menu's UL. If it's not set on one of those, the detection will fail and the document will be considered 'ltr' format.
What you'll need:
- A valid unordered list: By "valid", we mean one that satisfies the standards of a strict doctype.
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:
- Fx.Transitions (only if you're not going to use the default transition)
- 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 options for this script, but we thought you might want to control the drop down animation. As the name indicates, options are optional. For the live example on top of this page, no arguments were passed.
- 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. Check the examples below to see how to change the transition.
- openDelay: How long the mouse cursor must stay on a panel to open it. Default is 150 milliseconds, to prevent panels from opening when very briefly hovered. If you don't want any delay, just set this option to 0.
- closeDelay: How long the script has to wait after the mouse cursor left a panel to close this one. Default is 500 milliseconds because we think it's nicer than no delay at all. If you don't want a delay, set this option to 0.
- clickToOpen: A boolean value to specify if user must click on the panels to open them. Default is false
- mode: A string to choose how the top level menu should be displayed. Can be 'vertical' or 'horizontal'. Default is 'horizontal'.
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:
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dropdown.css"/>
Then the scripts needs an unordered list to build the menu. Let's start with a single level list.
Notice how we apply the class "dropdown" to the ul.
The style defined in the downloadable css file affects this class
<ul id="dropdown-menu" class="dropdown" >
Then we are ready to execute the script. We just add the following code in our document.
If we put everything together, we get something like this:
this is what we get:
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 <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
<!-- New UL starts here -->
<!-- New UL finished here -->
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 <ul> tags inside the one you just created.
<!-- New inner list starts here -->
<!-- New inner list finishes here -->
<!-- You can create a sub-menu here and in the next two LIs too -->
Refresh and enjoy.
Then you can add more and more sub-menus and you'll get something like the first example above.
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.
You can find details about Fx.Transitions here.
duration:Fx.Transitions.Bounce.easeOut //default was Fx.Transitions.linear
delay:1000, //default was 500ms
clickToOpen:true, //default was false
Another example? 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.
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.
- 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.
- 20090504 - Version 1.1.2: Fixed bug in 'clickToOpen' feature (forum thread here)
- 20090428 - Version 1.1.1: Added new "Open Delay" to go with the previously added "Close Delay", Right to Left text support, and a "vertical" display mode. Fixed position bugs in Chrome browser.
- 20081211 - Version 1.1.0: Added new "Close Delay" and "Click to Open" features. Stable with Mootools 1.2.1.
- 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.