Меню в стиле Mac (jQuery)

MacOs Icon Dock v3. Использует jQuery.


Подробности в скрипте.

<style>
 /* Dock */
 #dock {
  display: block;
  margin: 30px auto;
  top: 0px;
  width: 100%;
  text-align: center;
  overflow: hidden;
 }
 
 #dock ul {
  margin: 0px -60px;
  padding: 0px;
  list-style: none;
  height: 198px;
  line-height: 198px;
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  background: url("http://www.aplweb.co.uk/blog/js/mac-like-icon-dock-v3/img/dock-middle.png") bottom left repeat-x;
 }
 
 #dock ul:before,
 #dock ul:after {
  content: "";
  color: transparent;
  display: inline-block;
  width: 0px;
  padding-top: 60px;
  margin-top: -60px;
  vertical-align: bottom;
 }
 
 #dock ul:before {
  padding-left: 60px;
  margin-left: -60px;
  background: url("http://www.aplweb.co.uk/blog/js/mac-like-icon-dock-v3/img/dock-left.png") bottom left repeat-x;
 } 
 
 #dock ul:after {
  padding-right: 60px;
  margin-right: -60px;
  background: url("http://www.aplweb.co.uk/blog/js/mac-like-icon-dock-v3/img/dock-right.png") bottom right repeat-x;
 }
 
 /* Dock Icons */
 #dock li {
  display: inline-block;
  vertical-align: bottom;
  margin: 0px;
  padding: 0px;
  position: relative;
  overflow: visible;
 }
 
 #dock li.seperator {
  background: url("http://www.aplweb.co.uk/blog/js/mac-like-icon-dock-v3/img/dock-seperator.png") bottom left no-repeat;
  width: 20px;
  height: 158px;
  position: relative;
  vertical-align: bottom;
 }
 
 #dock li a {
  height: 153px;
  width: 48px;
  display: inline-block;
  text-align: center;
  position: relative;
  vertical-align: bottom;
  text-decoration: none;
  color: black;
  white-space: normal;
  letter-spacing: normal; 
  line-height: 1.3em;
  text-align: center;
  font-family: Arial;
  padding-top: 40px;
  margin-bottom: 5px;
  overflow: visible;
 }
 
 body.no_js #dock li a:hover {
  width: 128px !important;
 }
 
 #dock li a span {
  position: relative;
  line-height: 1.3em;
  display: none;
  text-align: center;
  font-weight: bold;
  font-size: 80%;
  padding: 4px 12px;
  background-color: #EEE;
 
  opacity: 0.4;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
 
  margin: 0px auto;
 
  top: -40px;
 
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
 }
 
 #dock li a:hover span {
  display: inline-block;
 }
 
 #dock li a:hover span:after {
  display: block;
  height: 9px;
  color: transparent;
  background: transparent url("http://www.aplweb.co.uk/blog/js/mac-like-icon-dock-v3/img/span.png") center top no-repeat;
  position: absolute;
  content: "";
  text-align: center;
  margin: 0px;
  padding: 0px;
  width: 100%;
  margin-left: -16px;
 }
 
 #dock li a img {
  height: auto;
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 10px;
  text-align: center;
  border: 0px none;
  margin-bottom: 15px;
 
  box-reflect: below 1px gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1)));
  -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1)));
  -moz-box-reflect: below 1px -moz-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1)));
 }
</style>

<!--[if lte IE 7]>
<style>
 /* Inline block fix */
 #dock ul {
  display: inline;
  zoom: 1;
 }
 
 #dock li, #dock li a {
  display: inline;
  zoom: 1;
 }
 
 /* Image quality fix */
 img {
  -ms-interpolation-mode: bicubic;
 }
 
 #dock li a span {
  filter: alpha(opacity=40);
 }
</style>
<![endif]-->

<div id="dock">
<ul>
<li><a href="#address"><span>Address</span><img src="http://4.bp.blogspot.com/-HSJqHfOTN6Y/TjD0dcWEcsI/AAAAAAAAFp0/ItmFsKLxCt4/s1600/Yunomi%2B%2528tea%2Bcup%2529.png" alt="[address]" /></a></li>
<!--
<li><a href="#band"><span>Band</span><img src="http://2.bp.blogspot.com/-LPm74hbkH3w/TjD0hZKa_VI/AAAAAAAAFp8/mV1Li6wqzMo/s1600/Yoritsuki_disk.png" alt="[band]" /></a></li>
-->
<li><a href="#calendar"><span>Calendar</span><img src="http://3.bp.blogspot.com/-xZCGkW5z8_w/TjD0mhReP7I/AAAAAAAAFqE/Y_vzR23iZ04/s1600/Noren%2B%2528short%2Bsplit%2Bcurtain%2529.png" alt="[calendar]" /></a></li>
<!--
<li class="active"><a href="#chat"><span>Chat</span><img src="http://4.bp.blogspot.com/-dlAyGYEi2zg/TjD0qdGsF6I/AAAAAAAAFqM/1zKzRXahsIY/s1600/Folder.png" alt="[chat]" /></a></li>
-->
<li class="active"><a href="#music"><span>Music</span><img src="http://1.bp.blogspot.com/-j-I2H-F0qq8/TjD0uUM1DnI/AAAAAAAAFqU/2qNEJIWJRVU/s1600/Takezake%2B%2528sake%25D0%259C%25D0%2583%2Bin%2Ba%2Bbamboo%2Bcontainer%2529.png" alt="[music]" /></a></li>
<!--
  -->
<li><a href="#photo"><span>Photo</span><img src="http://www.aplweb.co.uk/blog/js/mac-like-icon-dock-v3/img/icon-photo.png" alt="[photo]" /></a></li>
<!--
  -->
<li><a href="#text"><span>Text</span><img src="http://www.aplweb.co.uk/blog/js/mac-like-icon-dock-v3/img/icon-text.png" alt="[text]" /></a></li>
<!--
  -->
<li class="seperator"></li>
<!--
  -->
<li><a href="#folder?src=/apps/"><span>Applications</span><img src="http://1.bp.blogspot.com/-uBMRi9rMaXE/TjD1dkfEveI/AAAAAAAAFqc/Xd-6mYwPmjc/s320/Kokedama%2B%2528moss%2Bball%2529.png" alt="[apps]" /></a></li>
<!--
  -->
<li><a href="#folder?src=/pictures/"><span>Pictures</span><img src="http://3.bp.blogspot.com/-ZAlUs-yqlnQ/TjD1ooiOPnI/AAAAAAAAFqk/Eljv8cGKbH0/s320/Oshibori%2B%2528wet%2Bhand%2Btowel%2529.png" alt="[pictures]" /></a></li>
</ul>
</div>

<script>
 //library
 function distance(x0, y0, x1, y1) {
  var xDiff = x1-x0;
  var yDiff = y1-y0;
 
  return Math.sqrt(xDiff*xDiff + yDiff*yDiff);
 }
 
 //start
 var proximity = 180;
 var iconSmall = 48, iconLarge = 128; //css also needs changing to compensate with size
 var iconDiff = (iconLarge - iconSmall);
 var mouseX, mouseY;
 var dock = $("#dock");
 var animating = false, redrawReady = false;
 
 $(document.body).removeClass("no_js");
 
 //below are methods for maintaining a constant 60fps redraw for the dock without flushing
 $(document).bind("mousemove", function(e) {
  if (dock.is(":visible")) {
   mouseX = e.pageX;
   mouseY = e.pageY;
 
   redrawReady = true;
   registerConstantCheck();
  }
 });
 
 function registerConstantCheck() {
  if (!animating) {
   animating = true;
 
   window.setTimeout(callCheck, 15);
  }
 }
 
 function callCheck() {
  sizeDockIcons();
 
  animating = false;
 
  if (redrawReady) {
   redrawReady = false;
   registerConstantCheck();
  }
 }
 
 //do the maths and resize each icon
 function sizeDockIcons() {
  dock.find("li").each(function() {
   //find the distance from the center of each icon
   var centerX = $(this).offset().left + ($(this).outerWidth()/2.0);
   var centerY = $(this).offset().top + ($(this).outerHeight()/2.0);
 
   var dist = distance(centerX, centerY, mouseX, mouseY);
 
   //determine the new sizes of the icons from the mouse distance from their centres
   var newSize =  (1 - Math.min(1, Math.max(0, dist/proximity))) * iconDiff + iconSmall;
   $(this).find("a").css({width: newSize});
  });
 }
</script>

• Address
• Calendar
• Music
• Photo
• Text
• Applications
• Pictures