Menu igual da Oi mundo

[Dr. Stranho 0]

Acho que aqui é lugar correto pra postar isso...

 

To querendo inserir um menu no meu site, igual a esse aqui http://mundooi2.oi.com.br/home/ . Me refiro ao menu que tem a imagem do foguete, chip. etc...

Pelo que vi no fonte do site, é um Widget em Javascript.

Se alguém souber onde tem um tutorial de como fazer, ou pelo menos o caminho das pedras, agradeço.

 

[]'s

Dr. Stranho

[Matheus Tavares 167]

Bom amigo, com jQuery podemos aumentar tamanho de elementos com a função animate. Vou te dar um exemplo de uso:

 

$('#id').hover(function(){
  $(this).animate({width:'100px',height:'100px'},2000);
},function(){
  $(this).animate({width:'80px',height:'80px'},2000);
});

O funcionamento disso é simples: qdo passa o mouse em cima do elemento com id "id", ele fica com 100x100px, e quando tira o mouse, fica com 80x80px. Toda essa mudança de tamanho ocorre num tempo de 2 segundos (segundo os meus calculos).

 

Com 5 linhas fizemos tudo isso, imagina o que fazemos com 15. O menu inteiro bonitinho :)

 

Abraços

 

PS: Isso é bem simples. Você ainda pode incrementar o efeito para ficar suave como no exemplo. A base tá aí! ;)

[Dr. Stranho 0]

Valeu brother H4X0R, vou fazer uns experimentos aqui, quando tiver pronto eu posto.

 

[]'s

Dr. Stranho

 

Bom amigo, com jQuery podemos aumentar tamanho de elementos com a função animate. Vou te dar um exemplo de uso:

 

$('#id').hover(function(){
  $(this).animate({width:'100px',height:'100px'},2000);
},function(){
  $(this).animate({width:'80px',height:'80px'},2000);
});

O funcionamento disso é simples: qdo passa o mouse em cima do elemento com id "id", ele fica com 100x100px, e quando tira o mouse, fica com 80x80px. Toda essa mudança de tamanho ocorre num tempo de 2 segundos (segundo os meus calculos).

 

Com 5 linhas fizemos tudo isso, imagina o que fazemos com 15. O menu inteiro bonitinho :)

 

Abraços

 

PS: Isso é bem simples. Você ainda pode incrementar o efeito para ficar suave como no exemplo. A base tá aí! ;)