Over the past few years we have shared with you tons of Navigation and Menu plugins and we just can’t seem to get enough! Today is another set and we will focus on the “dock effect” navigation menu plugins all effects coded in JavaScript! Most of them are similar to the Apple Mac Icon Dock effect. Nice. (We just can’t get enough… we just can’t get enough… ) Enjoy! ;)

Related Posts:

1. Webber 2.0 Dock Menu Tutorial

In this short tutorial we will go through the CSS and a little bit of JavaScript that creates the Webber 2.0 Dock Menu.

Webber 2.0 Dock Menu

Source + Demo

2. euDock Menu

A new (cross Platform) OPEN SOURCE (LGPL) JavaScript emulation of a MacOsX dock bar.

euDock Menu

Source + Demo

3. MacStyleDock Menu

Achieving this effect in JavaScript is difficult, but the MacStyleDock function allows this feature to be implemented easily.

MacStyleDock Menu

Source + Demo

4. CSS Dock Menu jQuery + Fisheye

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.

CSS Dock Menu jQuery + Fisheye

Source Demo

5. jQ Dock Menu

A jQuery plugin that transforms images into a Mac-like Dock menu, with icons that expand on rollover!

jQ Dock Menu

Source + Demo

6. iconDock Menu

‘dock effect’ jQuery plugin.

iconDock Menu

Source + Demo

7. Dojo Fisheye Menu

A fisheye effect based on Dojo library. It’s easy to setup once you learn a few things about djConfig parameters. Downside of this script is the size of the dojo widgets JavaScript, if you plan on having this dojo effect only analyze the code and try to get rid of some.

Dojo Fisheye Menu

Source + Demo

8. Corner Dock Menu

A JavaScript navigation system easy to customize. You must just move your mouse over one of the smaller icons around the central one to move the docker.

Corner Dock Menu

Source + Demo

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • siddu


Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.