Apple dock osx menu jquery plugin

This JavaScript menu resembles the Apple Dock menu. You can use it as an image slideshow or for displaying links to social networks. The script is a jQuery plugin, so you also need to include the jQuery library. You can download the jQuery library below. This script works on a <div> containing <img>’s, optionally wrapped in <a>’s.

First, check out the demo and download the source files (heavily commented, pretty self-explanatory).

  • Demo (the little menu at the bottom of the browser)
  • Source files (.zip file, 36 kb)

Steps for getting this Apple Dock style menu on your website:

  • Download the source files and unzip them.
  • Upload “jquery-1.4.2.min.js”, “jquery.dock.js” and “myscript.js” to your site.
  • In your html, link to these scripts in the <head> tag (jquery-1.4.2 first, then jquery.dock.js and myscript.js).
  • In your html, create a <div>, containing <img>’s, optionally wrapped in <a>’s.
  • Add the css classes in “style.css” to your css file.
  • Tweak the css to make the menu look good.
  • Finished!

Link to the three scripts in the <head> tag of your html like this:

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.dock.js" type="text/javascript"></script>
<script src="myscript.js" type="text/javascript"></script>

You can call the plugin with three options, just change the content of “myscript.js”:

  • zoomFactor: a percentage of magnification e.g. 1.00 is no zooming, 2.00 = 200%
  • zoomWidth: the width of the magnification of the <img>’s
  • timeOut: the time (in milliseconds) for the menu to disappear after mouse out

 

 


 

Handig & leuk