Esse post vai atestar o quão fácil é utilizar o DOJO e também como são incríveis seus efeitos.
Clique na imagem abaixo para saber do que estamos falando:
Requisitos para fazer tal menu:
- Baixar o Dojo (http://download.dojotoolkit.org/downloads)
No header da sua página HTML você tem que incluir a biblioteca do dojo:
Na CSS:
/* dojo fisheeye */
.dojoxFisheyeListItemLabel {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: white;
border: 1px solid #666;
padding: 2px;
text-align: center;
position: absolute;
display: none;
white-space:pre;
font-size: 12px;
}
.dojoxFisheyeListItemLabel.dojoxFishSelected {
display: block;
}
.dojoxFisheyeListItemImage {
border: 0px;
position: absolute;
}
.dojoxFisheyeListItem {
position: absolute;
z-index: 2;
}
.dojoxFisheyeListBar {
position: relative;
}
Arquivo HTML:
Bacana… isso.
O joomla já tem vários módulos de menu que fazem isso, mas é sempre bom saber pescar… risos
*Habilitar o gravatar no seu blog…
Comentário by Ronildo Costa — 29/07/2008 @ 10:45
Bem interessante esse menu. Mas ainda por NÃO ser feito em flash. Mas gostaria de saber o porquê da escolha do Dojo toolkit. Eu estou para testar o extjs que me pareceu um ótimo framework javascript.
Comentário by Henrique Mattos — 31/07/2008 @ 10:28
Henrique,
A Zend Framework fechou uma relação com a Dojo Foundation, logo, no HEAD do SVN do Zend Framework, muitas coisas já estão sendo integrados utilizando o Dojo como framework de Javascript.
Conheço diversos frameworks em JS, porém, o dojo, não deixa a desejar nem um pouco, logo, não pretendo correr contra a maré, pois, na próxima versão do ZF tudo será mais fácil utilizando o Dojo!
Sobre o porque não fazer em flash é uma pergunta dificil no ponto de ser uma opção, de qualquer forma consigo ver diversas vantagens tais como:
- É muito simples fazer esse menu com Dojo
- Você tem total flexibilidade de adicionar/remover um item basta criar ou remover uma simples DIV.
- O tamanho dos ícones o formato do menu (horizontal/vertical) são totalmente parametrizados.
Há diversas vantagens e nossa preferência foi fazer dessa forma para todos possam inclusive aprender algo “novo” e ver que JS + CSS pode trazer um grande efeito e acabamento final.
Abraços
Wesley
Comentário by Wesley — 31/07/2008 @ 10:40
Copiei e colei, criei as imagens, fiz o download do dojo e não funcionou, eria que ser acrescentado algo + no código da chamada do dojo.js?
Comentário by thiago — 30/10/2008 @ 15:51
não funcionou
Comentário by rick — 05/02/2010 @ 13:50