Menú estilo dock

Este script llamado dock nos permite crear un menú con imágenes y un efecto de animación simple.

Debemos agregar el código antes de </head> como hacemos habitualmente y luego, el CSS:

<script type='text/javascript'>
//<![CDATA[
// ================================================================ 
//                   ------ dock menu ------- 
// script by Gerard Ferrandez - Ge-1-doot - February 2006 
// http://www.dhteumeuleu.com 
// ================================================================ 
var dock = function (dock, sMin, sMax) { 
  /* ---- private vars ---- */ 
  var xm = xmb = ov = 0; 
  var M = true; 
  var icons = document.getElementById(dock).getElementsByTagName('img'); 
  var N = icons.length; 
  var s = sMin; 
  var ovk = 0; 
  var addEvent = function (o, e, f) { 
    if (window.addEventListener) o.addEventListener(e, f, false); 
    else if (window.attachEvent) r = o.attachEvent('on' + e, f); 
  } 
  var pxLeft = function(o) { 
    for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft; 
    return x; 
  } 
  for(var i=0;i<N;i++) { 
    var o = icons[i]; 
    o.style.width = sMin+"px"; 
    o.style.height = sMin+"px"; 
    o.className = "dockicon"; 
  } 
  var run = function() { 
    for(var i=0;i<N;i++) { 
      var o = icons[i]; 
      var W = parseInt(o.style.width); 
      if(ov && ov.className=="dockicon") { 
        if(ov!=ovk){ 
          ovk=ov; 
          document.getElementById("legend").innerHTML = ov.lang; 
        } 
        if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin); 
        s = Math.min(sMax,s+.5); 
      } else { 
        s = Math.max(s-.5,sMin); 
        W = Math.max(W-N,sMin); 
      } 
      o.style.width = W+"px"; 
      o.style.height = W+"px"; 
    } 
    if(s >= sMax) M = false; 
  } 
  addEvent(document, 'mousemove', function (e) { 
    if(window.event) e=window.event; 
    xm = (e.x || e.clientX); 
    if(xm!=xmb){ 
      M = true; 
      xmb = xm; 
    } 
    ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null); 
  }); 
  setInterval(run, 16); 
}; 
 
window.onload = function() { 
  dock("dock", 48, 128);
}
//]]>
</script>

<style type='text/css'>
  #dock { /* el rectángulo contenedor */
    position: relative;
    text-align: center;
    width: 100%;
  } 
  #dock a, #dock a:visited { text-decoration: none; }
  #dock img { border: none; width: 0px; } 
  #legend { /* el texto inferior */
    color: #FFF;
    font-size: 24px;
    text-align: center;
    width: 100%;
  }
</style>

En el script, el único dato importante a definir son los tamaños de las imágenes; en este caso 48 y 128 que corresponden al estado mínimo inicial y al máximo que se muestra al expandirse.

El HTML lo ubicamos donde nos guste:

<div id="dock">
  <a href="URL_enlace1" target="_blank"><img src="URL_imagen1" lang="el texto 1"></a>
  <a href="URL_enlace2" target="_blank"><img src="URL_imagen2" lang="el texto 2"></a>
  <a href="URL_enlace3" target="_blank"><img src="URL_imagen3" lang="el texto 3"></a>
</div>
<div id="legend"></div>

En resumen, son enlaces simples donde el atributo lang de la etiqueta IMG contiene el texto a mostrar en la parte inferior.