JQuery : Dock Menu : Make a Dock Mac menu !

f 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.

DOWNLOADDEMONSTRATIONPLUGIN HOMEPAGE

• IMPLEMENTATION
• OPTIONS
• SCREENSHOTS

IMPLEMENTATION: 

1. First, include CSS & jQuery files

1 2 3 4 5 6 7 8 9 10 11 12 13

<!-- CSS files --> <link href="menu.css" rel="stylesheet" type="text/css" media="screen, projection" />   <!--PNG hack for IE 6.--> <!--[if lt IE 7]> <style type="text/css">    .dock img { behavior: url(iepngfix.htc) }    </style> <![endif]–>   <!-- Js Files --> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="interface.js"></script>

2. Write your HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="dock" id="dock">   <div class="dock-container" style="left: 563px; width: 240px; ">     <a class="dock-item" href="http://www.ndesign-studio.com" style="width: 40px; left: 0px; ">       <img src="images/home.png" alt="home">       <span>N.Design</span>     </a>     <a class="dock-item" href="http://www.webdesignerwall.com" style="width: 40px; left: 40px; ">       <img src="images/email.png" alt="contact">       <span>Designer Wall</span>     </a> ... ...   </div> </div>

3. Finnaly, call the plugin

1 2 3 4 5 6 7 8 9 10

<script type="text/javascript">   $(document).ready(function() {     $('#dock2').Fisheye({       maxWidth: 60,       items: 'a',       itemsText: 'span',       container: '.dock-container2'    }); }); </script>

OPTIONS: 

maxWidth

Integer

Default : 50 - Max-width of the image on hover

items

String

Default : a - Element of the menu

itemsText

String

Default : span - Text container element

container

String

Default : .dock-container - Class of the main menu container

itemWidth

Integer

Default : 40 - With of the image at the start

proximity

Integer

Default : 90 - In px, proximity of the items on hover

halign

String

Default : center - Horizontal position. Can be set to "left", "center" and "right"

valign

String

Default : top - Vertical position. Can be set to "bottom", "top"

alignment

String

Default : left - -

SCREENSHOTS

•