DockMenu igual ao MAC em JavaScript

Script bem leve (2kb) que faz um menu igual ao mac e não precisa de nenhum framework como Jquery, Mootols, Prototype.

A estrutura dele é simple e fácil de ser implementada.

Coloque Insira o css:

div#container_dock { height: 96px; position: relative; width: 450px; }
div#dock {text-align: center; position: absolute; left: 0; bottom: 0;  width: 450px;}
div#dock a img{ width: 0px; }
div#legend { text-align: center; font-weight: bold; font-size: 12px; }

Chame o JavaScript e faça a chamada para o dock

<script type="text/javascript" src="_scripts/dockMenu.js"></script>
<script type="text/javascript">
	window.onload = function(){
		// os 3 parâmetros são id do menu, largura mínima e máxima do ícone
		dock = new dock("dock", 40, 96);		
	}
</script>

Em seguida faça o HTML :

<div id="dock">
	<a href="http://www.tidbits.com.br/como-usar-jquery-junto-com-prototype-ou-mootols" target="_blank"><img src="http://www.tidbits.com.br/download/_images/Home.gif" alt="Jquery"> </a>
	<a href="http://www.tidbits.com.br/gerador-de-lorem-ipsum-para-ubiquity" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/MyComputer.gif" alt="Lorem Ipsum"> </a>
	<a href="http://www.tidbits.com.br/google-chrome-e-a-guerra-dos-browsers" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/Books.gif" alt="Chrome"> </a>
	<a href="http://www.tidbits.com.br/mobiemobz-orkut-e-a-web-para-o-mundo" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/Applications.gif" alt="MobieMobz"></a>
	<a href="http://www.tidbits.com.br/first-child-e-last-child-cross-browser-usando-css-condicional" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/Chat.gif" alt="Pseudo Classes"> </a>
	<a href="http://www.tidbits.com.br/a-interface-do-usuario-do-futuro-em-3-etapas" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/SoundApp.gif" alt="Interface"></a>
	<a href="http://www.tidbits.com.br/plugin-de-mascara-para-jquery-masked-input" target="_blank"><img src="http://www.tidbits.com.br/download/_images/Printers.gif" alt="Máscara"></a>
	<a href="http://www.tidbits.com.br/nao-torturem-os-usuarios-com-captcha" target="_blank"> <img src="http://www.tidbits.com.br/download/_images/Help.gif" alt="Captcha"> </a>
</div>
<div id="legend"></div>

Repare que todos estão com target=”_blank” pra abrir em outra página, mas isso não é necessário.

E o resultado é esse.

Repare também que o alt da imagem é o que aparecerá na legenda.

Tradução / adaptação do mestre Gerard Ferrandez do www.dhteumeuleu.com.

5 thoughts on “DockMenu igual ao MAC em JavaScript

  1. Cara, muito mal explicado… O arquivo dockMenu.js possui código próprio ou é para ser inserido o cód da div com id=”dock” através de um document.write(”)??????????
    Péssima explicação…

  2. Faltou dizer tmb que a primeira referência do seu css(div#conteiner_dock) é uma div que engloba a div “dock” que vc faz referência….

Leave a Reply

Your email address will not be published. Required fields are marked *