UvumiTools DockMenu Plugin
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.
- 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.
- 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.
- 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 valid unordered list: By "valid", we mean one that satisfies the standards of a strict doctype.
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:
- 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.
- 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.
- minHeight: The size in pixels of the icons when idle. Half of the original images size produces good results. Default is 64.
- maxHeight: 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.
<!--- [if lt IE 7] -->
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 lt IE 7] -->
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 lt IE 7] -->
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.
- 20080811 - Version 1.0.0: Initial release. Stable with Mootools 1.2.