Menu Dock em CSS

Depois de centos anos que eu estava atrás de acertar criar este dock, consegui em fim criar ele e estou aqui disponibilizando o codigo CSS do mesmo.

Composição do DOCK:
• style.css
• iepngfix.htc
• interface.js
• jquery.js
Obs: Estes arquivos necessários, estão hospedados no meu dominio FTP z7fans.ueuo.com, seguros de qualquer problema e qualquer problema que ocorre eu vou corrigir.

1º: Copie o código abaixo, e cole-o abaixo da tag html <'/TITLE> do seu código html.

Código:

<script type="text/javascript" src="http://www.z7fans.ueuo.com/menu/js/jquery.js"></script>
<script type="text/javascript" src="http://www.z7fans.ueuo.com/menu/js/interface.js"></script>
<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(http://www.z7fans.ueuo.com/menu/iepngfix.htc) }
 </style>
<![endif]-->
<link href="http://www.z7fans.ueuo.com/menu/style.css" rel="stylesheet" type="text/css" />

2º: Copie o código abaixo, e cole-o após a tag <'BODY> do seu código html, e deixe-a em um lugar apropriado.

Código:

<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="http://z7fans.blogspot.com/"><img src="http://www.z7fans.ueuo.com/menu/images/HomePage.png" alt="home" /><span>Home</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/p/sobre.html"><img src="http://www.z7fans.ueuo.com/menu/images/Sobre.png" alt="sobre" /><span>Sobre</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/p/parceiria.html"><img src="http://www.z7fans.ueuo.com/menu/images/Parceiria.png" alt="parceiria" /><span>Parceiria</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/p/contacte-se-z7fans.html"><img src="http://www.z7fans.ueuo.com/menu/images/Contato.png" alt="contato" /><span>Contato</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/2009/11/regras-de-criacao-de-temas.html"><img src="http://www.z7fans.ueuo.com/menu/images/Regras.png" alt="regras" /><span>Regras</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/p/termos-de-servico.html"><img src="http://www.z7fans.ueuo.com/menu/images/Termos.png" alt="Termos de Serviço" /><span>Termos de Serviço</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/2009/11/arquivos-para-reviver-reparar-e.html"><img src="http://www.z7fans.ueuo.com/menu/images/Backups.png" alt="backups" /><span>Backups</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/2010/04/sony-ericsson-z750a2-o-aparelho-z750-e.html"><img src="http://www.z7fans.ueuo.com/menu/images/Iniciantes.png" alt="iniciantes" /><span>Iniciantes</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/p/area-de-duvidas.html"><img src="http://www.z7fans.ueuo.com/menu/images/Ajuda.png" alt="duvidas" /><span>Duvidas</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/2009/11/pedidos-de-temas-gifs-animados-ou.html"><img src="http://www.z7fans.ueuo.com/menu/images/Pedidos.png" alt="pedidos" /><span>Pedidos</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/p/apostilas.html"><img src="http://www.z7fans.ueuo.com/menu/images/Apostilas.png" alt="apostilas" /><span>Apostilas</span></a>
  <a class="dock-item" href="http://z7fans.blogspot.com/2010/04/z7tbar-toolbar-do-z7fans.html"><img src="http://www.z7fans.ueuo.com/menu/images/z7Tbar.png" alt="z7tbar" /><span>z7TBar</span></a>
  <a class="dock-item" href="http://assoc-entregatos.blogspot.com/"><img src="http://www.z7fans.ueuo.com/menu/images/EntreGatos.png" alt="entregatos" /><span>Entregatos</span></a>
</div>
</div>
<script type="text/javascript">
   
   $(document).ready(
      function()
      {
         $('#dock').Fisheye(
            {
               maxWidth: 50,
               items: 'a',
               itemsText: 'span',
               container: '.dock-container',
               itemWidth: 40,
               proximity: 90,
               halign : 'center'
            }
         )
      }
   );

</script>

3º: Neste codigo abaixo, você poderá modificar a propriedade de um item:

Código:

<a class="dock-item" href="http://z7fans.blogspot.com/"><img src="http://www.z7fans.ueuo.com/menu/images/HomePage.png" alt="home" /><span>Home</span></a>

> Modifique o item "href" para modificar o link do item e o item "IMG SRC" para determinar o destino da imagem, e onde tem "SPAN" "/SPAN" é o nome que aparecera debaixo do item do dock.

Aqui está um exemplo pronto -> [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Espero que tenham gostado...