Description
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.
Features
- 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
- 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! Fully vertical mode: Now you can display the whole menu vertically, including the top level menu. One forum user pointed it could be done with a simple CSS hack. We decided to implement it directly as a javascript option to make it even easier. See the 'How To' section and demos below.
- 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.
0 Comments