|
If you're using a Mac or used one in the past, I'm pretty sure you'll know (and love) the dock menu. The fish eye (or fisheye) effect, zooming in and out the objects, is really cool.
I created a module for Joomla! 1.0.x and Joomla! 1.5 that allows you to add such a dock menu to your website. It's called mfDockMenu and can be used to increase the Web 2.0 value of your website and to give it some more eye-candy.
Get ready for a very cool menu on your website. Use mfDockMenu and impress your visitors with this beautiful menu. |
The script is build on the great CSS Dock Menu from N.Design. I've added N.Design to my network page, since it's a good design blog. mfDockMenu also uses jQuery.
Demo Video of mfDockMenu
Install on Joomla! 1.0.x
- Log in to your back-end of the site
- Go to "Installers", "Modules"
- Click on "Browse" and navigate to the downloaded ZIP archive
- Press "Upload File & Install"
- Go to "Modules", "Site Modules"
- Search for mfDockMenu and edit it
- Set your parameters
- Save and publish the module
Install on Joomla! 1.5
- Log in to your back-end of the site
- Go to "Extensions", "Install/Uninstall"
- Click on "Browse" and navigate to the downloaded ZIP archive
- Press "Upload File & Install"
- Go to "Extensions", "Module Manager"
- Search for mfDockMenu and edit it
- Set your parameters
- Save and publish the module
How to use
Before you try out mfDockMenu, make sure you've added the following lines in the <head> section of your template. To do so, connect with your FTP and browse to your templates folder. Select your current template and edit the "index.php" file. Search for <head> and add the following lines direct after it:
<script type="text/javascript" src="modules/mod_mfdockmenu/js/jquery.js"></script>
<script type="text/javascript" src="modules/mod_mfdockmenu/js/interface.js"></script>
<link href="modules/mod_mfdockmenu/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(modules/mod_mfdockmenu/iepngfix.htc) }
</style>
<![endif]-->
Now you're all ready to use your fisheye menu!
You can change all parameters in the module configuration.
Take note that the base URL of the images always is: modules/mod_mfdockmenu/images
Features
- Up to 10 dock items
- Comes standard with 10 beautiful icons from N.Design
- Change maximum item width, proximity and more
- Set the menu type to stick to the top or the bottom
Download
Because of the use of jQuery, there is a possibility that the use of this module causes other plugins that are using JavaScript files conflict. Sadly, there is no way around this.
Feel free to give feedback about this module. Enjoy using it! Tags: module free joomla webdesign
Interested in this topic? You might enjoy another article I've written called
|