jQuery

Mac-like icon dock (v2)

Works with:
FF3
Chrome
IE8
Opera
Safari

This project has been updated! It now includes more robust JavaScript, icons and more complete XHTML.

Description

A "Mac OS X" style icon dock, built entirely in XHTML/CSS and with smooth animation using jQuery/JavaScript. As from the demo, and unlike many other icon docks, the navigation works with NO JavaScript. This is very important as the website should still be accessible with JavaScript disabled. Each icon can have a scalable image and a title. As the image is dynamically resized, it is up to the browser to smoothly render the icon.

Internet Explorer 6 does no longer work fully due to lack of support for vertical align with images. This will be corrected in the next version.

Note: This demonstration uses icons from http://lemex.deviantart.com/art/micr-Os-icon-pack-64-px-v2-135049863, which are not for commercial use.

Demo

Without JavaScript
With JavaScript

JavaScript

  1. var HOVER_SCALE = 2.0;
  2. var PROXIMITY = 200.0;
  3.  
  4. $(function() {
  5.     $(".icon_enlarge").each(function(i) {
  6.         //private variables
  7.         var dock = $(this);
  8.         var dock_icons = dock.find("li a");
  9.        
  10.         //store the to and from sizes
  11.         $.each(dock_icons, function() {
  12.             var initHeight = parseInt($(this).height());
  13.             var initWidth = parseInt($(this).width());
  14.  
  15.             $(this).data("initWidth", initWidth);
  16.             $(this).data("initHeight", initHeight);
  17.            
  18.             $(this).data("newWidth", initWidth * HOVER_SCALE);
  19.             $(this).data("newHeight", initHeight * HOVER_SCALE);
  20.         });
  21.        
  22.         //event handlers
  23.         dock.bind("mouseleave",function(event) {
  24.             $.each(dock_icons, function() {
  25.                 $(this).animate({"height": $(this).data("initHeight") + "px", "width": $(this).data("initWidth") + "px"},"fast");
  26.             });
  27.         });
  28.        
  29.         dock.bind("mousemove", function(event) {
  30.             $.each(dock_icons, function() {
  31.                 var newSize = calculateDockIconSize($(this), event.pageX);
  32.                
  33.                 $(this).stop();
  34.                 $(this).width(newSize[0]);
  35.                 $(this).height(newSize[1]);
  36.             });
  37.         });
  38.     });
  39. });
  40.  
  41. /**
  42. * Calculate the height of an icon based upon its position from the mouse
  43. * @param icon
  44. * @param mouse position (x only)
  45. * @return new width/height
  46. */
  47. function calculateDockIconSize(icon, mousePosX) {
  48.     //get the distance in x from the mouse to the icon
  49.     var initWidth = parseInt($(icon).data("initWidth"));
  50.     var initHeight = parseInt($(icon).data("initHeight"));
  51.     var newWidth = parseInt($(icon).data("newWidth"));
  52.     var newHeight = parseInt($(icon).data("newHeight"));
  53.    
  54.     var xProximity = Math.abs(mousePosX - $(icon).offset().left - (newWidth/2.0));
  55.    
  56.     //if we need to vary the height because the mouse is within range
  57.     if (xProximity<PROXIMITY) {
  58.         //get the percentage height the icon needs to be
  59.         var newRatio = ((PROXIMITY-xProximity)/PROXIMITY);
  60.        
  61.         var additionalWidth = newRatio * (newWidth-initWidth);
  62.         var additionalHeight = newRatio * (newHeight-initHeight);
  63.        
  64.         //add on the additional percentage to the icon
  65.         return [(initWidth + additionalWidth), (initHeight + additionalHeight)];
  66.     } else {
  67.         //otherwise, return the original icon size
  68.         return [initWidth, initHeight];
  69.     }
  70. }

CSS

  1. .navigation {
  2.     text-align: center;
  3. }
  4.  
  5. .icon_dock {
  6.     display: inline-block;
  7.     width: auto;
  8.     margin: 0px;
  9.     margin-top: 10px;
  10.     padding: 0px;
  11.     padding-left: 60px;
  12.     padding-right: 60px;
  13.     list-style: none;
  14.     height: 135px;
  15.     overflow: visible;
  16.     vertical-align: bottom;
  17.     line-height: 135px;
  18.     text-align: center;
  19.     background: transparent url("icons/shadow.gif") repeat-x bottom left;
  20. }
  21.  
  22. .icon_dock:after {
  23.     clear: both;
  24.     display: block;
  25.     content: ".";
  26.     visibility: hidden;
  27.     height: 0px;
  28. }
  29.  
  30. .icon_dock li {
  31.     width: auto;
  32.     height: auto;
  33.     display: inline-block;
  34.     bottom: 0px;
  35.     vertical-align: bottom;
  36.     padding-left: 1px;
  37.     padding-right: 1px;
  38. }
  39.  
  40. .icon_dock li.seperator {
  41.     background: transparent url("icons/seperator.png") no-repeat center center;
  42. }
  43.  
  44. .icon_dock li.seperator,
  45. .icon_dock li.seperator:hover {
  46.     width: 6px;
  47.     height: 60px;
  48.     border: none;
  49. }
  50.  
  51. .icon_dock li a {
  52.     margin: 0px;
  53.     padding: 0px;
  54.     display: block;
  55.     padding-top: 0px;
  56.     height: 60px;
  57.     width: 60px;
  58.     text-align: center;
  59.     color: black;
  60.     text-decoration: none;
  61.     position: relative;
  62.     outline: none;
  63. }
  64.  
  65. .icon_dock li a:hover,
  66. .icon_dock li a.hover {
  67.     width: 120px;
  68.     height: 120px;
  69.     padding-top: 15px;
  70. }
  71.  
  72. .icon_dock li a span {
  73.     width: 100%;
  74.     top: 0px;
  75.     position: absolute;
  76.     text-align: center;
  77.     left: 0px;
  78.     z-index: 100;
  79.     visibility: hidden;
  80. }
  81.  
  82. .icon_dock li a:hover span {
  83.     visibility: visible;
  84. }
  85.  
  86. .icon_dock li a img {
  87.     width: 100%;
  88.     position: absolute;
  89.     bottom: 0px;
  90.     left: 0px;
  91. }
  92.  

IE CSS (Conditional)

  1. .icon_dock li {
  2.     /*IE Hack for inline-block*/
  3.     zoom: 1;
  4.     display: inline;
  5. }

XHTML

  1. <div class="navigation">
  2.     <ul class="icon_dock">
  3.         <li><a href="#"><span>Internet</span><img src="icons/world.png" alt="[Internet icon]" title="Internet" /></a></li>
  4.         <li><a href="#"><span>Chat</span><img src="icons/chat.png" alt="[Chat icon]" title="Chat" /></a></li>
  5.         <li><a href="#"><span>Contact</span><img src="icons/contact.png" alt="[Contact icon]" title="Contact" /></a></li>
  6.         <li><a href="#"><span>Notes</span><img src="icons/notes.png" alt="[Notes icon]" title="Notes" /></a></li>
  7.         <li><a href="#"><span>Folder</span><img src="icons/folder.png" alt="[Folder icon]" title="Folder" /></a></li>
  8.         <li><a href="#"><span>Settings</span><img src="icons/lock.png" alt="[Settings icon]" title="Settings" /></a></li>
  9.         <li class="seperator"></li>
  10.         <li><a href="#"><span>Help</span><img src="icons/about.png" alt="[Help icon]" title="Help" /></a></li>
  11.         <li><a href="#"><span>Desktop</span><img src="icons/desktop.png" alt="[Desktop icon]" title="Desktop" /></a></li>
  12.         <li><a href="#"><span>Bin</span><img src="icons/garbage.png" alt="[Bin icon]" title="Bin" /></a></li>
  13.     </ul>
  14. </div>