Utilizando um menu Fisheye (olho de peixe)
Olá,
Cansado daquele velho menu que muda a cor do texto ao passar o mouse?
Que tal um menu olho de peixe, simples e bonito ?
O menu é “animado” por Jscript que a “grosso modo” consiste de 2 imagens para cada item do menu, por ex. para cada item existem 2 imagens, neste caso, 1 imagem com 90 x 90 e outra 128 x 128… O Jscript, como já disse, cria a transição da menor para a maior criando o efeito que conhecemos como “olho de peixe” …
Existe apenas 3 pontos na configuração que acho interessante mexer no Jscript se for necessário, são:
startSize : 90,
endSize : 128,
imgType : “.gif”,
Bem, no arquivo fisheye.js logo à partir da 2º linha existem essas informações acima.
startSize : Tamanho inicial da imagem, bom que seja o tamanho da imagem menor.
endSize : Tamanho final da imagem, bom que seja o tamanho da imagem maior.
imgType : Extensão do arquivo de imagem
Ah, se você não gostou dos ícones que estão no exemplo segue um link que utilizo muito para “caçar” meus ícones.
Esse cara aí acima possui ícones/imagens de ótima qualidade que podem ser utilizadas em menus para web. No geral você procura pelo nome da imagem, por ex: se você está procurando uma lixeira, digite trash, recycled, etc..
Links:
– Visualizar Exemplo Funcionando
– Download do pacote rar
– Procurar Icons
Obs: as imagens não precisam ser do mesmo tamanho que usamos no exemplo, basta que você altere no Jscript como explicado acima, para não ficar distorcida deixe o startSize e endSize de acordo com as dimensões das imagens que você escolher…
Outra coisa, no iconfinder para cada imagem que você visualizar e for baixar, perceba que a mesma imagem pode possuir lá tamanhos diferentes, ou seja, você não precisa redimencionar as imagens para ter uma pequena e uma maior, basta escolher a imagem no iconfinder baixar os 2 tamanhos dela.
Abraços,
Rafael Clares,
consegui fazer e aqui ta rodando normalmente o que ta dificil é posicionar isso no local correto na pagina…
alguem ai pode me dizer alguma coisa?
é que não conheço muito de html e edito sites do Dream weaver MX
Parabéns pela iniciativa!
Muito bom mesmo.
Como fazer o efeito ficar ao contrario ou seja pra cima e com texto tb?
Marcio, teria que alterar o script js. Seria bem chatinho de fazer rs… Mas boa sorte!
muito bom ,eu vi ele no seu site pessoal! mas no caso lá ele tem um efeito que quando clica ele abre a pagina abaixo dele com efeito! e esse nao tem!? mas mesmo assim muito bom!!! vlw
Alvim, o efeito é criado pelo JQuery. Neste caso, existe uma div/layer com conteudo de cada página, elas estão ocultas um efeito do JQuery é chamado no clique de cada botão do menu, cada botão abre/revela um contéudo e esconde os demais.
Ex. no botão contato, eu escondo todas as divs e revelo apenas a que possui o conteudo desejado (contato form).
Segue aí o efeito do JQuery
http://api.jquery.com/slideUp/
cara vlw, mas e meio complicado!vou da uma estudada e pequisar mais sobre o assunto! muito obrigado amigo.
Sempre criando qualidade, valeu mesmo…nota 10