Simple Dock Menu with Jquery and CSS

JQuery Dock menu that transforms images into a Mac-like Dock menu, with icons that expand on rollover. It is usingJquery library and Fisheye component from Interface and some of myicons. It’s a little rough in Opera, but it looks fine on the other browsers that I’ve tried it on. Make sure you check out the demo and download the source code to play with it.  OS X dock and stacks isn’t new, its looks great.

Code Implementation:

In between the HTML <head> tag, add the following code


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
   .dock img { behavior: url( }
< ![endif]–>




<script type="text/javascript">
   maxWidth: 60,
   items: 'a',
   itemsText: 'span',
   container: '.dock-container2',
   itemWidth: 40,
   proximity: 80,
   alignment : 'left',
   valign: 'bottom',
   halign : 'center'

Download Source


Share This Article

Join Over 8000+ Other Readers

Get latest updates in you inbox (free).
Free Gifts & Coupons.
Prize & Rewards worth 500$ monthly .

100% Privacy, No Spam !


  1. Moomins0 says

    Hi has anyone successfully go this to work in Sharepoint? Any chance of a step by step?


Leave a Reply

Your email address will not be published. Required fields are marked *