UvumiTools DockMenu Plugin

The UvumiTools DockMenu reproduces Mac OS dock in pure Javascript, thanks to the Mootools Javascript Framework. To see this plugin in action, check out the bottom of your browser window: it's a horizontal menu, with icons growing up when you hover them with your mouse. As you would expect from an UvumiTools plugin, the whole thing is degradable, built from standard HTML, and is cross-browser compatible.

Like the UvumiTools Dropdown Menu, you can build this menu with a simple <ul> element, where each <li> represents a menu item. Toss some basic image links in there, and you're all set.

• Requires no Javascript knowledge: Simply call the script with the the ID of the <ul> you want to transform --it's one line of code that you can copy/past from the How To section.
• 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 dock.
• Non-obtrusive: Since the script doesn't generate any new HTML but only acts on your existing markup, everything is visible and clickable from the beginning, even with Javascript disabled. 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.
• Cross-Browser Compatible: Tested in these 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 contact us with IE4 or AOL issues. We know about that, and frankly we just don't care.
• Fixed position and transparent PNG in every browser INCLUDING IE6: Internet Explorer 6 does not support the position:fixed styling rule which we use in this plugin to make the menu stick to the bottom of the screen, even when you scroll the page. So for IE6 we used a trick which requires the usage of extra CSS, HTML conditional comments and special javascript. If you're interested to see how it works, look at the uncompressed javascript available in the download section below. Internet Explorer 6 does not support transparent PNG image files natively. You must use a special css filter to display them properly. This is a common and simple fix, but here it is taken care of by javascript, which means you don't have to worry about it one bit.
• Can be displayed on top or bottom: You can position the menu on top or bottom on the screen with a single configuration parameter.
• Easy to update: Adding a new item to the menu is as simple as creating a new <li> element, with an image link inside.

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.
• 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 a previous version of Mootools then the gallery will not work unless you upgrade. Sure, upgrading is a slight 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), then you're stoked because you can use a single Mootools library for everything. All you'll need is the UvumiTools Dock Menu 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
    • Selector
    • DomReady
  • Fx
    • Fx
    • FX.CSS
    • FX.Tween
  • Plugins
    • Fx.Elements

Initialization

Arguments

• Element: The <ul> you want to transform. It can be the element's id or a pointer to the element object itself.
• Options: an object that will allow you to modify some of the default properties. Like the name suggests, options are optional. For the live example on this page, no arguments were passed.

Options

• position: String that specifies if the dock should be on top or bottom of the screen. Default is bottom.
• captionClassName: The only new elements generated are the captions displayed over the icons when they are hovered. These captions are genereated from the icons' alt properties and can be stylized using this CSS class name. Default is dock-caption.
• min The size in pixels of the icons when idle. Half of the original images size produces good results. Default is 64.
• max The size in pixels of the icons when fully grown. This should be the actual height of your images. Default is 128, to match the icons provided in the demo.
• openDuration: The time necessary for the dock to lift up from the bottom of the screen when hovered (in milliseconds). Default is 500.
• hiddenOpacity: Opacity level of the dock when not focused. Value must be between 0 and 1, and default is 0.5.
• IEfixer: In order to make the PNG files display properly in IE6, the images must be transfered to the background. But we must replace the original images with a blank GIF to give the images a dimension and to catch the clicks. This option defines the path to this blank image, relative to the document's path. The default value is css/blank.gif which coresponds to where the image file should be when you download it from this page.

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. For this particular script, we need to load the special CSS file for Internet Explorer 6. While we can detect the browser and load css with javascript, this file must be loaded first, with the document or it will result in 2 scrollbars on the side of the document. For this we use conditional comments :

Then we need a <ul> with an image link in each list item. The links here are just made up. It's your job to replace them with links to your own pages. We set the alt attribute of each image with a description, which will be used to genereate caption of the icons. This is actually a good habit because Strict Doctype requires the alt property to be set for every image.

If you put it together now, you should get a code like this :

If you open this file in a web browser, you should get something like this:

Technically, this is a basic image menu. It is functional, the icons are actual links, you just need to replace the href to match your site sections.

Now we just need to execute the script and let it work its magic.

Resulting in this completed code:

If you refresh your document, you should get a menu just like the one on this page. If not, then you may have messed up somewhere. Make sure you have all the files, and that your images' src are pointing to the right place.

If you got it to work, you can try with other options, like displaying the dock on top, with a lower opacity, and a faster popup animation:

• We don't really know: This plugin is just an experiment and we actually have never used it in a production environment, so we are not 100% sure it is unbreakable and will not mess up with your design. We tested it and it looks OK, but we cannot guaranty it is bug free. If you find any bug, let us know and we'll try to fix it. In FF2 it's a bit clunky and tends to push things around on the page during animation, but it still functions well and looks cool.

Mootools library for UvumiTools Dock Menu. Limited MooTools version custom-built for optimal UvumiTools Dock performance. This version of the MooTools library only contains the classes necessary for the Dock Menu 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, or just download and use the whole Mootools script. Make sure you use version 1.2 and that you include all the classes described in the Requirements section above.

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

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

CSS files. This includes a commented style sheet, a special style sheet for IE6 and a blank gif image, also used by IE6.

Images featured in this menu. Needed for the example.

Demo. Contains the HTML code to generate the same dock as the one visible on this page. Make sure you have the other required files.

Download

• 20080811 - Version 1.0.0: Initial release. Stable with Mootools 1.2.