Home arrow Programming arrow mfDockMenu: A fisheye effect for your Joomla! menu
mfDockMenu: A fisheye effect for your Joomla! menu
mfDockMenu 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

  1. Log in to your back-end of the site
  2. Go to "Installers", "Modules"
  3. Click on "Browse" and navigate to the downloaded ZIP archive
  4. Press "Upload File & Install"
  5. Go to "Modules", "Site Modules"
  6. Search for mfDockMenu and edit it
  7. Set your parameters
  8. Save and publish the module

Install on Joomla! 1.5

  1. Log in to your back-end of the site
  2. Go to "Extensions", "Install/Uninstall"
  3. Click on "Browse" and navigate to the downloaded ZIP archive
  4. Press "Upload File & Install"
  5. Go to "Extensions", "Module Manager"
  6. Search for mfDockMenu and edit it
  7. Set your parameters
  8. 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

Attribution-Share Alike 3.0

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

Comments
Add NewSearchRSS
Good web practices   | 205.167.7.xxx | 2008-02-20 13:56:08
Gravatar image Just wanted to say that we're impressed with the number of extensions you've been producing recently for Joomla 1.5.

We actually included mfFancyZoom in our post "Essential Joomla 1.5 extensions" here:
http://www.goodwebpractices.com/joomla/joomla-1.5-extensions.html

Keep up the good work!

David
Houston - mfDockMenu Problem   | 69.19.14.xxx | 2008-02-20 17:04:07
Gravatar image When I inserted the header code it left me with the showing at the top of my site.
Marco - Conflict?   | 62.194.187.xxx | 2008-02-20 17:17:56
Gravatar image Like I said in the article:
Quote:
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.

Are you running any plugins using JavaScript?
Baltus - No demo on site?   | 193.90.148.xxx | 2008-02-20 17:51:45
Gravatar image I just wonder why there is no live demo to be found on this or any other site?

Is there a place to see it in real life and not on a video?
Marco - Conflict   | 62.194.187.xxx | 2008-02-20 18:23:31
Gravatar image Like I said in the article, some JavaScript files can conflict others. I use other plugins for this website, that don't work together with mfDockMenu.

You can see how it works over here:
CSS Dock Menu

Greetings,,
nathan - One More try...   | 71.97.187.xxx | 2008-02-20 18:46:32
Gravatar image okay, obviously I can't submit that line of code on here...

what you need to do to fix the issue is look at the last line, just before the ending '>', delete the preceding '-' and replace it with '--'. Do NOT just add an extra '-', as the existing dash isn't a '-' but a special kind of dash.
Baltus - hmmm..   | 193.90.148.xxx | 2008-02-20 19:14:45
Gravatar image It now works like a charm for me, but I seem to have lost some of the CSS for the rest of the joomla to work.

Its all just a vertical list(content etc)

I think this must be something with the insert of the code in index.php?

Because it came like this after the code was inserted.

Noe for the dash... I am currious about correkting my site.

Its a really beauty and I hope to build my site around this as a main navigation "thing"

Please clarify the "dash" issue.
Anonymous   | 62.194.187.xxx | 2008-02-21 19:33:44
Gravatar image can you please explain it for beginner ?

I have tried everything, yes, there are javascripts in my website index.php page inside the tags, but it is right after the as it was suppose to be added in the help files,

All the icons just appear in front of each other on the 1st Icon's position, ( i can see Youtube linked icon only )

any fix for it ?
doctor   | 193.188.105.xxx | 2008-02-21 13:00:48
Gravatar image code does not appeared :

anyways ..

--> or --> ( what is the difference ?
Marco - Check   | 62.194.187.xxx | 2008-02-21 19:33:21
Gravatar image Could you provide me with an URL to your website, so I can check?
JD Mumma - Fix for stacked icons   | 64.203.50.xxx | 2008-05-03 09:41:15
Gravatar image I too am having a "icons just appear in front of each other" problem and do not see a fix on this page or anywhere else on the net. Is there a solution?
Very COOL menu if I can get it to work!
Thanks
Baltus - Solved(almost)   | 193.90.148.xxx | 2008-02-20 19:34:09
Gravatar image Its seems like you need to choose between adding the dash and getting the "site CSS" in order, but no mfDockMenu, or keeping the single dash and keep mfDockMenu, but loose the site CSS.

When I changed the dash to two dashes, it just went opposite. From not displaying site inn CSS order, to not displaing mfDockMenu. Now it just shows the video link and nothing more.

Any idea what went wrong for me?

Best regards

Baltus Norway
Marco - IE hack   | 62.194.187.xxx | 2008-02-20 20:29:14
Gravatar image Possible problem could be the IE hack. I updated the "head" code (Big thanks nathan! Stupid MS Word...), please check above.

If it still doesn't work, please contact me through the contact form.

Greetings,,,
air - air   | 60.51.34.xxx | 2008-02-21 00:44:35
Gravatar image y dont u use this extension on your website?? <img src=illy:' /> <img src=illy:' /> And it'll be more attractive if this ext release under GNU GPL licenses
Marco   | 145.74.180.xxx | 2008-02-21 10:23:42
Gravatar image Hi,

I think I'm going to use this module in my next template.

The CC 3.0 license isn't that different from the GNU GPL. The only thing you have to do is mention my website name.

Greetings,,,
Goods - Getting an error   | 207.237.153.xxx | 2008-02-29 18:31:38
Gravatar image Seems like an excellent module. however, I get "PCLZIP_ERR_BAD_FORMAT (-10)" when I try to install. Any help would be appreciated.
doctor - re: Getting an error   | 193.188.105.xxx | 2008-02-29 18:59:29
Gravatar image
Goods wrote:
Seems like an excellent module. however, I get "PCLZIP_ERR_BAD_FORMAT (-10)" when I try to install. Any help would be appreciated.


I extract the zip on my local drive, and than compress it again with WINRAR (ZIP) Mode,

upload your own zip - it will work fine.
Goods - Thanks for the quck response..   | 68.197.137.xxx | 2008-02-29 21:37:48
Gravatar image I tried already, but for a checksum error..
Goods - Never Mind... Got it   | 68.197.137.xxx | 2008-02-29 21:42:09
Gravatar image Thanks a lot "doctor", I should have read your post more carefully.. I did try it again using Winrar in "ZIP" mode and it worked.. now to play around with it. Thanks.
outsidersthe - Moving Text URL Link   | 72.132.149.xxx | 2008-03-02 20:23:26
Gravatar image Is there a possibility to move the text link to the top of the images, or another designated area. I have the images on top and the text appears on the bottom, which cannot be read because my body text is there. I don't want to have to give my menu are a larger width space.

Great module by the way, and many thanks.
Marco - Menu type   | 145.74.181.xxx | 2008-03-03 09:11:56
Gravatar image You could try changing the menu type to "bottom". Now the text will appear on top.

Thanks for your feedback; Maybe I'll add more options in the next version.

Good luck.
theanimalix - Problem with manu layout   | 88.200.108.xxx | 2008-03-29 17:04:32
Gravatar image Hello.

When I finally got the menu to wrok, without changing my css styles, I have next problem. The menu that is displayed is very low (i mean hight), so that the menu pictures arent displayed well. Even more, when I come close with mouse, the pictures move, but they move behind the menu backgground picture (dock-bg). Can anyone help me to solve this problem?

Thx and bye
lingualnyc - dockmenu not installing   | 24.193.112.xxx | 2008-04-02 03:09:53
Gravatar image i tried several times...deleting installed files and reinstalling again but i get the same error when i try installing

Upload module - Upload Failed
Unrecoverable error "PCLZIP_ERR_BAD_FORMAT (-10)"
[ Continue ... ]
Upload module - Failed
Installation file not found:
[ Continue ... ]

any suggestions?
Marco - Unpack local   | 62.194.187.xxx | 2008-04-02 11:46:33
Gravatar image Try to unpack the file on your local machine and re-pack again. Try again with the newly created .ZIP file.
Jay   | 60.234.153.xxx | 2008-04-22 11:37:35
Gravatar image Very nice module. My website has a dark background and i found replacing the default background gif with a transparent one worked nicely.

Can i align the menu to the left somehow? Everything i have tried to alter in the style.css has resulted in chaos.
Jay -   | 84.80.20.xxx | 2008-04-22 20:55:17
Gravatar image Got it .....

root/modules/mod_mfdockmenu/style.css

/* dock - top */
.dock {
margin-bottom: 70px;
position: absolute;
height: 50px;
text-align: center;
}
.dock-container {
left: 0;
height: 50px;
background: url(images/dock-bg2.gif);
padding-left: 20px;
}

a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
left: 0;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
Sam - When installing mf doc menu my site disappear   | 189.144.229.xxx | 2008-04-27 23:26:37
Gravatar image Hi this is an urgent message,

After installing mf doc menu and published I couldn't see my site it does not appear anything.

Please help!!
deech - icons size in normal state   | 196.25.172.xxx | 2008-04-29 13:19:41
Gravatar image very nice module!
Just a question... is there anyway to increase the size of the icons in the menu in the normal state?? I cant seem to get it. Maybe you can give a hint!

thanks

deech
Mokaro - IE give an error on page   | 87.208.88.xxx | 2008-05-04 02:25:13
Gravatar image After I installed your great module I got this error. When I look into the problem I get the message row 1, char 1, This property is not supported by this object. (this is a free translate from Dutch :whistle: )
Everything is functioning OK. In mozilla looks everything ok. Can someone give me a suggestion what is wrong?
Jorge - Fix for stacked icons PLEASE   | 212.95.222.xxx | 2008-05-05 12:09:28
Gravatar image Very good menu, but I can't get it to work. I have all icons in the same place, only visible the last one.
I don't know where to do the dash replacement (in the head section of the index.php???) I have changed it but nothing happens...
Please help me!
Lee T - MR   | 84.30.153.xxx | 2008-05-19 08:50:24
Gravatar image Is it possible to orientate the icons verticaly instead of horizontally??? I can't see any thing in the options to let me do this.

Either way it's a very cool little toy! I was very impressed. Great work
Anonymous   | 88.218.85.xxx | 2008-06-15 15:07:17
Gravatar image This mod is JUsT PERFECT !!!!!
but.... i have a problem...
it works only in frontpage , if i will go to another page the it shows only one icon (one behind the other)
Allos   | 88.218.85.xxx | 2008-06-15 15:21:27
Gravatar image It works on all pages but it doesnt work in the video gallery page (seyret video component).!!

Does anyone knows what goes wrong ??!!
Rex Kramer - Maybe worth a look | Maybe worth a joomla port ;   | 85.179.227.xxx | 2008-07-05 00:45:54
Gravatar image Maybe worth a look | Maybe worth a joomla port ;-)

http://eudock.jules.it/index-eudock2.0.php

TIA!
CU
Rex Kramer - Another alternative - MooTools based (not joomlafi   | 85.179.227.xxx | 2008-07-05 00:52:10
Gravatar image Since you are using jQuery... and maybe some people have problems with scriptlibrary collisions...

i found this MOOTOOLS based fisheye concept:
http://zendold.lojcomm.com.br/ifisheye/

Maybe a future project for Marco ;-)
TIA!!!
rustyDusty - Unzipped, rezipped reinstall-still won't work   | 63.245.120.xxx | 2008-07-14 21:07:42
Gravatar image :angry:
This module is the greatest. It looked good before I added the code to my template index.php page but now I have the same problem as everyone else: one icon at the top directing me to youtube.
Can't use it.
Anyone who has conquered this problem post your solution step by step ASAP.
Thanks.
Calvin Kim - re: Unzipped, rezipped reinstall-still won't work   | 68.161.233.xxx | 2008-07-24 19:10:41
Gravatar image
rustyDusty wrote:
:angry:
This module is the greatest. It looked good before I added the code to my template index.php page but now I have the same problem as everyone else: one icon at the top directing me to youtube.
Can't use it.
Anyone who has conquered this problem post your solution step by step ASAP.
Thanks.


I had same problem.
You inserted *code* right after , right?
In fact, you have to insert them after .

It worked for me.
Calvin Kim - re: re: Unzipped, rezipped reinstall-still won't   | 68.161.233.xxx | 2008-07-24 19:13:07
Gravatar image
Calvin Kim wrote:

I had same problem.
You inserted *code* right after , right?
In fact, you have to insert them after .

It worked for me.

I had same problem.
Code:
You inserted *code* right after , right?
In fact, you have to insert them after
.

It worked for me.
Calvin Kim - re: Unzipped, rezipped reinstall-still won't work   | 68.161.233.xxx | 2008-07-24 19:17:55
Gravatar image
rustyDusty wrote:
:angry:
This module is the greatest. It looked good before I added the code to my template index.php page but now I have the same problem as everyone else: one icon at the top directing me to youtube.
Can't use it.
Anyone who has conquered this problem post your solution step by step ASAP.
Thanks.

Well, html code was filtered. :(
Insert code after following:
[code][/code]
Hope this will display as it is.
Calvin Kim - re: Unzipped, rezipped reinstall-still won't work   | 68.161.233.xxx | 2008-07-24 19:19:36
Gravatar image
rustyDusty wrote:
:angry:
This module is the greatest. It looked good before I added the code to my template index.php page but now I have the same problem as everyone else: one icon at the top directing me to youtube.
Can't use it.
Anyone who has conquered this problem post your solution step by step ASAP.
Thanks.


Well,
you have to insert codes after
Code:
jdoc:include type="head"
Wick - No luck either   | 86.95.156.xxx | 2008-07-27 13:52:14
Gravatar image Hi guys, im having no luck either with this BADASS looking module!
I have the same problem most of you guys seem to have ;
I only have the youtube icon ans link visable.

I read this 'solution'.. but I really dont get that one :0

Well,
you have to insert codes after
Code:
jdoc:include type="head"

where is this code???

Thanks alot.. It would be so great to get this component working in a few days before i launch my website!!
Cody - re: how to make it work on firefox 3?   | 116.48.7.xxx | 2008-08-03 12:30:40
Gravatar image
Cody wrote:
This is amazing


thanks for this wonderful css dock menu
But how to make it work on firefox 3?

Thanks,
Cody
Read more...
Name:
Email:
  Gravatar enabled.
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Security Image
Please input the anti-spam code that you can read in the image.
Unsubscribe from e-mail notifications.
 
< Prev   Next >
Subscribe
Navigation