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.
It’s a little rough in Opera, but it looks fine on the other browsers that I’ve tried it on.
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.
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.
Looks nice, but doesn’t degrade at all without JS or without CSS.
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.
the first dock i ever saw was this one
http://eudock.jules.it/euDock.php
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.
I like it… very slick.
I like it a lot!
The only problem is with Konqueror; it crashes…
Is there a fix to make this div always to be aligned to bottom of screen?
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.
Does not work with latest jquery-1.2.6
yes, it does indeed work with 1.2.6
What if I want to add in “end caps” to the background to finish off the look of the base that the icons sit on?
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…
thanks!
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?
I like it but doesn’t work with an another jquery script
With this patch a fixed positioned Fisheye also works after scrolling:
http://www.monkey-business.biz/181/jquery-interfaces-fisheye-position-fixed-patch/
Pingback: A Fresh Start of 2010 « Floating Reverie
Pingback: ???? » Blog Archive » [jQuery]Fisheye Dock Menu
Pingback: Getting Zend_Navigation menu to work with jQuery's Fisheye | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes