Fisheye Dock Menu

Posted on by

Fisheye Dock Menu

With a little bit of nice theming, the Fisheye component from Interface has been adapted to build a beautiful “CSS dock menu“. It’s currently making all the rounds on design blogs and on Digg.

Some more information about what this menu was designed for can be found on the developer’s site:

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using jQuery JavaScript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom. This CSS dock menu is perfect to add on to my WordPress iTheme. Here I will show you how to implement it to your web page.

21 thoughts on “Fisheye Dock Menu

  1. Jason on said:

    It’s a little rough in Opera, but it looks fine on the other browsers that I’ve tried it on.

  2. AMIGrAve on said:

    Very very slow on a 1Ghz laptop.

    The Dojo’s one is quite faster.

    Hope someone will make a good (read fast) version for jQuery because this one is unusable.

  3. Matei "Ambient.Impact" Stanca on said:

    Great looking icons, but there’s nothing else remarkable about this. I assume this story was posted because it promotes jQuery? That’s always a good thing.

    Otherwise, I have plenty of bones to pick with this “CSS Menu”:

    1) This is quite inaccurately named, since the bulk of the effect is done through JavaScript and inline images. There’s very little CSS involved, and none for the effect itself. This leads to confusion (as seen in some of the comments on the site) that it’s done mainly through CSS.
    2) Why is the $(document).ready(); script block in the body? He’s not promoting very good separation of behaviour and structure with that. Works just the same in the , and it’s tidier.

    It looks great, of course. I just wish he’d thought out the name a bit better. That is all.

  4. Have to agree with Dave, with js off in firefox all that loads for me is the last link on the right for each menu.
    Not that it’s a concern, another degradable feature would simply be to have an alternate text version menu at the bottom of the page and use the top style fisheye. Usability is a slippery slope, looks great here, but I have mega processing and RAM. Maybe it would be slow on a lesser machine, checking it on the home unit later then.

  5. It takes up to much desktop real estate. (I like it… but how can I get it to not activate until I get directly over an item to start? The expansion area above triggers it if my mouse is anywhere near it. After activatied this would be what I want, but when it goes down to the smaller size I want it to be in a “waiting” mode.

  6. Ricardo on said:

    Is there a fix to make this div always to be aligned to bottom of screen?

  7. Hi,

    I’m just wondering what to do if I was relative positioning of the dock, i.e place it somewhere in the middle of a page (vertically).

    I realise this might be a CSS issue that I need to figure out, but I was wondering if the script has something to do with it.

    Please let me know.

  8. Martin on said:

    is possible to have lots of icons?, like 50 or more. and have a fixed width on the container div, then the icons scroll behind…


  9. I am playing with this with text not icons.

    Issue, images will then have different widths( some text is longer than others), or they img width are all set to the biggest size. The issue with this is then of course lots of space between menu items.

    Any ideas on a solution to this?

  10. Pingback: A Fresh Start of 2010 « Floating Reverie

  11. Pingback: ???? » Blog Archive » [jQuery]Fisheye Dock Menu

  12. Pingback: Getting Zend_Navigation menu to work with jQuery's Fisheye | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes