August 21st, 2010

Mac/iphone Style Dock menu for your website

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:

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:


safalra
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:


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:

wordpress plugin mac dock
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.