CSS Dock Menu

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

Description: This script uses Ajax (DHTML interacting with the server) to let you dynamically include the contents of an external page onto the current document. It’s similar in function to our Iframe SSI script, though uses no frames, obviously. :)

Hi, i’m having some problems with CSS Dock menu in IE. its works great in Firefox but all the images display on the right and are really small. the fisheye is also wrong… does anyone have a fix for this?

Description: This script uses Ajax (DHTML interacting with the server) to let you dynamically include the contents of an external page onto the current document. It’s similar in function to our Iframe SSI script, though uses no frames, obviously. :)

This is fantastic. I have been able to implement in a regular website using css, but have yet to be able to implement into my wordpress theme. Has anyone been able to add this to wordpress theme? If so, could you lend a hand?

Thank you for showing us how to do it css dock menu, it is really good article, especially i like it becouse you showed all coding here in this article, so it is going to make it easire wehn we design it. Well done.

Hi…this is a fantastic module. I’m trying to use under a Joomla project. I’m not using all of the itens, just 4 icons on the dock and i’ve positioned on the header but i’ve been looking for an another position, aligned on the right of the header but i couldn’t do it. I’ve tried to do the positioning on CSS but it’s not working.
You guys know how to do it??I supposed that the positioning is determined by jquery but i simply couldn’t understand the code. I’ve just found that is a inline CSS with left atribute.
Anyone can help me please? thanks!!

Hi,
I’ve been using your fabulous Mac style dock, but I don’t know how to get spacing between the icons. It looks awful for now if I don’t get some spaces between the icons I made..
Could you help me please ?

Placement of the module is very easy, once you know how to work with layers. Placed 4 menu’s in layers all over the mainpage (the two top menus consist of only one item each). http://www.degeustwins.nl
Success, Victor

when the cursor comes close to the CSS dock menu.
It start to enlarge.
But its start point is too far for my website.
I want to start enlargement much closer point.
How can I adjust the distance it start to move between cursor and menu

Hi guys, i absolutely love this menu, but i can’t get it to work with the latest jQuery?
Is anyone else experiencing this?
You can see from my site (under construction) that it’s not quite working. If I simply move the include script tag for the interface.js below the jquery.js then it works but subsequently stops anything that’s referencing the jQuery.js

I’m expecting anyone to fix this for me but if you have experienced the same problem i’d love to hear your solution.

But I can’t get around two major problems …
1.
the interface script interferes with other jquery.js files and causes malfunction of other jquery depending scripts

2. the bottom dock only stays on the bottom in a “non”scrollable page. The moment a page is longer than the screen and you scroll the page down. the dock would not move with the scroll (meaning it would not stay at the bottom edge of the screen) but would move into the screen and up the screen as you scroll further down.

I am very thankful for this script, however I have installed a plugin in wordpress where I had this working, and the dock menu stopped from working, the plugin is a page flip plugin, any ideas on this one?

I LOVE THIS NEW AGE FREE SUPPRT BLOGS FORUMS FREE BUT VOLUNTEER AND FREE SUPPORT

It’s all super cool as long as you JUST DONT ASK A QUESTION – OK! No-one of these over brainy kids todays will ever understand why you would ask a question anyways, They are SO EXTREME PERFECT AND GOOD! oh- and free

just keep on praising each other you are all so marvelous and exceptional intelligent WOW WOW WOW WOW WOW.

And – there we go – no one asks you to accept this free super fuck-up!

Hi there, i am trying to make the icons in my dock menu bigger. i have 128×128 px icons and it stays small. how do i manipulate the css to make the icons bigger and the dock menu bigger? Please will you respond and help me as soon as possible. I would really appreciate the help. i am a great fan of this site.

I made use of this beautiful mac-like dock in my application. Initially, I tried to place the dock fixed at the bottom of the page. But, the dock behaved anomalously in IE(always at top) as anticipated. Hence, I made use of a fixed position jQuery plug-in in order to achieve this functionality. The fisheye works fine when the page is scrolled down to the maximum extent, otherwise the fisheye doesn’t work. Even I applied the fisheye patch but it was futile. Any insights on how to accomplish this?

I’m sorry quys, but I tried this on my website and it didn’t work. First I had to fix a couple of positioning problems in the codes, because it didn’t stick under your screen after scrolling…. To make my story shorter, I have the dock on my website now, but the rollover effect is now turned of, because that caused a lot of problems… this dock is better and more mac: http://www.zurb.com/playground/osx-dock

The fisheye works fine when the page is scrolled down to the maximum extent, otherwise the fisheye doesn’t work. Even I applied the fisheye patch but it was futile. Any insights on how to accomplish this?

I want to put this menu on my site but I want the labels to be there with the image when the page loads. I don’t want it come when I hover over it. On hovering only the image should become bigger. Can you suggest how this can be achieved?

I want to put this menu on my site but I want the labels to be there with the image when the page loads. I don’t want it come when I hover over it. On hovering only the image should become bigger. Can you suggest how this can be achieved?

hi, can you help me!! My dock menu is not run in UpdatePanel (ASP.Net). When i press the button to refesh information in UpdatePanel , CSS for dock item is not run again, can you tell me why and what must i do to solve this prolem, thank you very much!!

i want use your wonderful css dock menue and at the same site the roundabout-shape in a gallery.
(http://fredhq.com/projects/roundabout-shapes/).
but it doesn’t really work together, it seems to block each other.
when i take the css dock & js files out in an seperate file like this:
,
and

I can’t believe that something that looks so sophisticated can be implemented so simply – even I can follow it! jQuery really is a gift for all us web designers who are fluent in CSS but real dumb when it comes to the real nitty gritty of writing sophisticated code. Thanks for the post and I can’t wait for the opportunity of using the information.

Thanks for the nice Dock Menu – ever since Apple introduced the Dock Menu with OSX, everybody has tried to copy the design of their ingenious creation.
For me, this is one of the best Dock Menu scripts that I have seen online, and since it’s Javascript it can run on devices with no Flash player.
I am a little annoyed with Flash, as I previously bought this Dock Menu, http://www.flashxml.net/dock-menu.html but I was sad to have to change it after receiving more than a couple of e-mails from my visitors, which entered the site from their phones or tablets, and they had no Flash player.
This menu is perfect and works even on low-class smartphones. To bad of the Dock Menu from flash xml as it really looked a bit better.

Very nice menu, thank you.
The only downside is that it can not be customized very easy. For that you have to modify the code and I’m a newbie when it comes about programming. I found here: http://www.flashxml.net/dock-menu.html a Flash dock menu. It doesn’t work on Apple devices like iPhone but it’s very customizable through xml files.