UvumiTools DockMenu Plugin

Description

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.

Features

Requirements

What you'll need:

How To

Initialization

new UvumiDock(element, options);

Arguments

Options

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 :

<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dock.css"/>
<!--- [if lt IE 7] -->
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dock-ie6.css" />
<![endif]-->
<script type="text/javascript" src="js/mootools-for-dock.js"> </script>
<script type="text/javascript" src="js/UvumiDock.js"> </script>
</head>

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.

<ul id="dock" >
<li>
<a href="home.html"><img src="images/cd.png" alt="Home" /></a>
</li>
<li>
<a href="strings.html"><img src="images/guitar.png" alt="Strings" /></a>
</li>
<li>
<a href="percussion.html"><img src="images/drums.png" alt="Percussion" /></a>
</li>
<li>
<a href="archive.html"><img src="images/tape.png" alt="Archive" /></a>
</li>
<li>
<a href="listen.html"><img src="images/speaker.png" alt="Listen" /></a>
</li>
<li>
<a href="recordings.html"><img src="images/mic.png" alt="Recordings" /></a>
</li>
</ul>

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

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

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dock.css"/>
<!--- [if lt IE 7] -->
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dock-ie6.css" />
<![endif]-->
<script type="text/javascript" src="js/mootools-for-dock.js"> </script>
<script type="text/javascript" src="js/UvumiDock.js"> </script>
</head>
<body>
<ul id="dock" >
<li>
<a href="home.html"><img src="images/cd.png" alt="Home" /></a>
</li>
<li>
<a href="strings.html"><img src="images/guitar.png" alt="Strings" /></a>
</li>
<li>
<a href="percussion.html"><img src="images/drums.png" alt="Percussion" /></a>
</li>
<li>
<a href="archive.html"><img src="images/tape.png" alt="Archive" /></a>
</li>
<li>
<a href="listen.html"><img src="images/speaker.png" alt="Listen" /></a>
</li>
<li>
<a href="recordings.html"><img src="images/mic.png" alt="Recodings" /></a>
</li>
</ul>
</body>
</html>

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.

<script type="text/javascript">
var myDock = new UvumiDock('dock');
</script>

Resulting in this completed code:

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

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dock.css"/>
<!--- [if lt IE 7] -->
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dock-ie6.css" />
<![endif]-->
<script type="text/javascript" src="js/mootools-for-dock.js"> </script>
<script type="text/javascript" src="js/UvumiDock.js"> </script>
<script type="text/javascript">
var myDock = new UvumiDock('dock');
</script>
</head>
<body>
<ul id="dock" >
<li>
<a href="home.html"><img src="images/cd.png" alt="Home" /></a>
</li>
<li>
<a href="strings.html"><img src="images/guitar.png" alt="Strings" /></a>
</li>
<li>
<a href="percussion.html"><img src="images/drums.png" alt="Percussion" /></a>
</li>
<li>
<a href="archive.html"><img src="images/tape.png" alt="Archive" /></a>
</li>
<li>
<a href="listen.html"><img src="images/speaker.png" alt="Listen" /></a>
</li>
<li>
<a href="recordings.html"><img src="images/mic.png" alt="Recordings" /></a>
</li>
</ul>
</body>
</html>

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:

<script type="text/javascript">
var myDock = new UvumiDock('dock',{
position:'top',
openDuration:200,
hiddenOpacity:0.3
});
</script>

Known Issues

Download

Change Log