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(iepngfix.htc) }
   </style>
< ![endif]–>

 
doc-menu
 

Configuration

 

<script type="text/javascript">
   $(document).ready(
   function()
   {
   $('#dock2').Fisheye(
   {
   maxWidth: 60,
   items: 'a',
   itemsText: 'span',
   container: '.dock-container2',
   itemWidth: 40,
   proximity: 80,
   alignment : 'left',
   valign: 'bottom',
   halign : 'center'
   }
   )
   }
   );
</script>

Download Source

Demo

Please donate!


Comments

  1. Moomins0 says

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

    Thanks!

Leave a Reply

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