I like Mac OS X dock menu and decided to write an article to add this type of dock menu in the website/blog. In this article, I will cover a few ways to add dock style navigation menu for your website.

Fisheye menu/CSS Dock Menu:

Fisheye menu URL: http://interface.eyecon.ro/docs/fisheye

Demo: http://interface.eyecon.ro/demos/fisheye.html

CSS Dock menu URL: http://www.ndesign-studio.com/blog/css-dock-menu

Demo: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html

Download: http://www.ndesign-studio.com/file/css-dock-menu.zip

js files: interface.js(13 KB), jquery.js(21 KB)

Both Fisheye menu and CSS Dock menu use same thing.

The main reason to use this one was because it’s incredibly smooth, no stuttering and responsive. The limitation is that you can’t use fixed positioning with it if the page needs to scroll as it will break. There is JavaScript workaround for this but need to customize js file. If you don’t need it fixed within the browser window then it works great.

Safalra Dock Menu:

URL: http://safalra.com/web-design/javascript/mac-style-dock/

Demo: http://safalra.com/web-design/javascript/mac-style-dock/demonstration.html

Download: http://safalra.com/web-design/javascript/mac-style-dock/MacStyleDock.compressed.js

File Size: MacStyleDock.compressed.js(2765 bytes)

It’s pretty lightweight (~2kb) and it is based on javascript/JSON. It is more customizable.

jqDock:

Demo: http://www.wizzud.com/jqDock/

File Size: jquery.jqDock.min.js(11 KB)

If you are using jQuery, It is the best option for you. You can fully customize dock menu easily.

MacDock Plugin for wordpress:

URL: http://wordpress.org/extend/plugins/macdock-mac-like-dock-plugin-for-wordpress-blogs/

Demo: http://www.macphobia.com/

It uses Safalra Dock Menu. It will generate Mac like Dock at the bottom of your WordPress Blog.

Conclusion: If you are using wordpress blog, Macdock plugin is best. If you don’t require fixed position during scrolling, Fisheye menu/CSS Dock Menu are the best option for you. If you have to apply javascript operation, use Safalra Dock Menu. If you are using jQuery and require fixed position, jqDock is the best option for you.

Hope, it helps.