slide na div! efeito tipo ipad.

[jeanpaulo 0]

ola gente, sou webdesigner, mais nao programador. vivo pegando codigos na net e tentando fazer funcionar, mais as vezes por uma simples besteira ele n funciona como eu quero pois como ja disse nao sou programador.

 

bom, eu quero criar uma pagina com um menu oculto e quando eu passa o mouse no topo da pagina, a pagina inteira desliza pra baixo e mostra o menu, como se ele estivesse por baixo. parece o efeito do iphone ou ipad, quando se clica duas vezes no botao home, toda da tela sobe e mostra o menu q esta em baixo da pagina.

 

a pagina é essa, apenas uma imagem em tela cheia. o que eu quero é q quando o mouse chegar nos primeior 40px de cima pra baixo, a pagina toda rola pra baixo e o menu aparece em baixo. http://zulk.com.br/nova.png

 

eu achei varios codigos na net, so que todos precisao ser clicados pra fazer o efeito, e eu quero apenas passa o mouse por cima.

o efeito é exatamente esse so que sem clicar http://zulk.com.br/2/leitor.html . eu adaptei esse codigo, axo q é jquery, se alguem conseguisse tranformar esse codigo para em vezes de click funcinonar apenas com o passa do mouse. para ver o efeito click nas tres barras no topo da pagina.

 

eu axei esse codigo so com css http://zulk.com.br/slid.html, funciona do jeito que eu quero so q ele nao empurra a pagina (div preta) pra baixo. outro problema desse codigo é que eu quero q a div vermelha, q ta oculta, nao venha deslizando de cima pra baixo, queria q ela tivesse parada, como se apenas a div ver e preta saisse de cima dela.

 

o outro codigo é esse aqui http://zulk.com.br/slidelateral/examples/basic.html so que esse abre uma janela modal, ou seja, outra pagina, e nao apenas uma div. tb tem o problema que é preciso clicar para funcionar. tentei colocar o mouseover no href mais nao consegui. tb eu queria ele de cima pra baixo.

 

esse outro cogido funciona http://web-kreation.com/demos/login_form_mootools_1.2/# so que tem o problema do click. ele é feito com mootools

 

e ai alguem me ajuda?

[Ted k' 126]

Bem... diante de tanta dúvida assim, acho que vai precisar pagar um freelancer, mas, se quer tentar por si vamos lá:

 

Para modificar de clicks para hovers, existe no jQuery uma função chamada .hover(), seria fundamental você dar uma lida e ver os exemplos que seguem nesse link: http://api.jquery.com/hover/

 

Sobre a segunda dúvida, no jQuery também existem funções para correr uma div, só que você vai precisar posicionar as divs nos locais corretos, com CSS e depois aplicar os efeitos. Para esse tipo de efeito, use a função .animate() junto com a função .hover() citada anteriormente, segue exemplos e dicas nesse link: http://api.jquery.com/animate/

 

A terceira dúvida se você parar e pensar um pouco, vai ver que se o .animate() consegue fazer a segunda opção perfeitamente, a terceira é simples, pensa ai :)

 

E sobre a quarta dúvida, segue um link em jQuery: http://web-kreation.com/demos/Sliding_login_panel_jquery/

Se conseguir fazer as três anteriores, nem precisa mais desse link ai, é tudo a mesma coisa :)

 

Boa sorte em tudo, qualquer dúvida pode postar!