Campo de Login Flutuante

[vitinho.vitor 0]

Boa tarde,

Estou criando um layout de um site e gostaria de saber como eu faço para que uma DIV apareça quando clico em um link.

Vocês podem ver um exemplo neste site: http://turmadosoninho.com.br/

É só clicar em cima de uma seta preta ao lado de "Pesquisar...".

Já pesquisei na internet e não achei nada parecido.

 

Se alguém souber favor avisar.

 

Desde já agradeço,

Vitor

[GabrielFerrari 41]

Cara com Jquery isso ai é brincadeira de criança! hehehe

 

slideToggle();

 

Tem a função do slideUP e slidDown juntos.

 

 

de uma olhada na documentação do Jquery -> http://api.jquery.com/slideToggle

Se tiver alguma dúvida, torne a postar.

 

Vou mover para área de JavaScript! :)

[vitinho.vitor 0]

Gabriel, relamente o efeito fica muito bom, porém quando clico para abrir ele "empurra" toda a página para baixo e para cima, gostaria de saber se tem como abrir apenas uma div como por cima do conteúdo.

Estou usando da seguinte maneira:

 <p>
   <input type="text" name="usuario" size="30" />
 </p>
 <a href="#"><button style="background-image:url('images/btn.png'); color: white; border: 1px; width: 66px; height:21px;"> </button></a>
<script>
   $("button").click(function () {
     $("p").slideToggle("swing");
   });
</script>

 

Obrigado,

Vitor

[GabrielFerrari 41]

ahh sim,

Você vai precisar usar a propriedade z-index

http://aprendacss.wordpress.com/2008/08/12/z-index/

[Jhony ZaM 1]

OCmo noso amigo acima falou a propriedade z-index funciona perfeitamente,porem necessita de um position, Absolute ou Fixed, ou mexer adequadamente nos float espero complmentar em algo obg.

[GabrielFerrari 41]

Informações adicionais são sempre bem vindas!

Sempre esquecemos de algo. :P

[vitinho.vitor 0]

Boa tarde, agradeço a todos e estou quase conseguindo. Gostaria que vocês dessem uma olhada.

Clique aqui

 

Agora só gostaria que a "janela" descesse em cima do botão e que o botão (Login) ficasse também sempre embaixo da DIV flutuante.

Será que é possível?

 

Obrigado,

Vitor

[GabrielFerrari 41]

DEIXA o botao login sempre em baixo é meio embassado porque são posicionamento absolut e float

[vitinho.vitor 0]

Não entendi direito como fazer isto que você falou.

Segue meu código:

 <div id="login" align="center">
 <p class="log">
   <i><font size="1">Portal do Representante:</font><br>
   <label><input type="text" name="usuario" size="20" value="Usuário" onfocus="this.value=''" onBlur="this.value='Usuário'" /></label><br>
   <label><input type="password" name="senha" size="20" value="aaaaaaaaaa" onfocus="this.value=''" onBlur="this.value='aaaaaaaaaa'" /></label><br>
   <input type="submit" value="" style="background-image:url('images/acessa.PNG'); color: white; border: 1px; width: 66px; height:21px;" />
   </i>
   </p>
 </div>
 <div style="width:785px; text-align:right; margin:0 auto;" align="center">
 <button style="background-image:url('images/btn.png'); color: white; border: 1px; width: 66px; height:21px;"> </button>
 </div>

 

CSS

 #login {
   text-align:center;
   position:fixed;
   z-index:99;
   background-color:#104E8B;
   width:785px;

   margin:0 auto;
 }

 p.log { 
   left:50%;
   margin-left:-450px;
   position:fixed;
   z-index:99;
   background-color:#104E8B;
   margin-top:0;
   margin:0 auto;
   display:none;
   width:auto;
   color:white;
 }

 

Se puderem me ajudar ficarei grato.

 

Obrigado,

Vitor.

[Jhony ZaM 1]

Vamos la voce esta utilizando z-index:99; nas duas divs, ou seja os dois estao no mesmo nivel, voce precisa por o maior z-index para a pagina que ficara superior a outra.

Outra coisa sempre que voce utiliza position fixed ou absolute margin:0 auto; nao ira funcionar deves ai trabalhar com left, margin-left, top ou margin-top...

Espero que ajude to meio sem tempo mais vlw...

[vitinho.vitor 0]

Boa tarde,

Na verdade eu gostaria de saber como eu posso fazer para que o botão desça junto com a janela de login, pois deste modo eles estão separados.

 

Obrigado,

Vitor