WebAppers

/ best free open source web resources /

Shopify

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.

fish-eye-dock-menu.png

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

6 Comments
  • http://www.XGhozt.com/ XGhozt

    Not my favorite.

  • http://blog.olicio.us/ Oskar Krawczyk

    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

  • http://www.machoe.com Mac Hoe

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

  • http://... JohnS

    @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

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons