/ best free open source web resources /

Graphic Resources

Mac OS X-Style Dock Menu in Javascript

Posted · Category: License Free, Menu

Remember the time when I introduced Nice List of Open Source Fish Eye Menu? The dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Now, we have another solution for it, MacStyleDock function allows this feature to be implemented easily.


Safalra has pointed out some usability issues when using dock as well. Anyone considering using the dock should be aware of the usability issues it raises. Firstly, the dock is generated entirely using JavaScript. If no alternative navigation is available then the site will be impossible to navigate for those without JavaScript. Secondly, the dock item magnification itself harms usability. Because the dock icons expand dynamically, they move on screen. The user has to correct for this movement, and this slows down their use of the dock.

Requirements: Any Modern Browsers with Javscript Enabled
Demo: http://www.safalra.com/web-design/javascript/mac-style-dock/
License: License Free

  • Not my favorite.

  • A bit clunky on Firefox – seems that the MooTools based one works a lot faster. Neverless a good POC, but let’s keep it real here and ask ourselves how usable is it…

  • Leon

    What’s the advantage above other navigation menu styles?
    For me it is like an animated gif vs. a normal gif, it draws your attention but further adds nothing more.

  • Pingback: » Mac OS X-Style Dock Menu in Javascript Webcreatives()

  • looks really cool but i cant figure out how to make it work on a wordpress installation..

  • @Mac Hoe
    You can find here: http://www.flashxml.net/dock-menu.html#swmi-wordpress a nice dock menu with install instructions for wordpress, good luck! It’s Flash but I think it worth a try.

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons