Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

acc

Barra para usuarios

Por , em Javascript

Recommended Posts

acc    0

acc
Postado

Bom dia,

Eu queria + ou - assim, fica uma barra lá em cima que tem os botoes logar e cadastrar, quando a pessoa clicasse em um dos dois, descia um painel com o respectivo form, teria como alguem me ajudar? :mellow:

Desde já, obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Você pode fazer de várias maneiras. Um exemplo é criar um setTimeout, chamando a função de x em x segundos para atribuir novos valores ao "top" do objeto.

 

Exemplo básico:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Klonder - Rolar div</title>

<style type="text/css">
* {background-color:#FFF; margin:0; padding:0; list-style: none;}
body {margin-top: 0; margin-left:0;}

#menuRolante {
width:170px;
position:absolute; top:-100px; 
font-family:tahoma,arial,verdana; font-size:11px;
border:#555 1px solid; padding:5px}

.caixa {border:#0080FF 1px solid; width:100px; font-family:tahoma,verdana,arial;}
</style>
<script type="text/javascript">
function rolarMenu(d) {
var objMenu = document.getElementById("menuRolante");
var objLoginSim = document.getElementById("loginSim");
var objLoginNao = document.getElementById("loginNao");

if (d == 'down') {
	if (objMenu.offsetTop < 0) {
		objMenu.style.top = (objMenu.offsetTop+10)+"px";
		objLoginSim.style.display = "none";
		objLoginNao.style.display = "inline";
		window.setTimeout("rolarMenu('down')",50);
	}

} else {
	if (objMenu.offsetTop > -100) {
		objMenu.style.top = (objMenu.offsetTop-10)+"px";
		objLoginSim.style.display = "inline";
		objLoginNao.style.display = "none";
		window.setTimeout("rolarMenu('up')",50);
	}


}
}
</script>
</head>
<body>
<div id="menuRolante">
	<form name="frmCadastro" action="" method="post" style="background:#EFEFEF; height:100px;">
	Usuário: <input type="text" name="usuario" class="caixa" maxlength="12">
	<br>Senha: <input type="password" name="senha" class="caixa" maxlength="12">
	<br><br><input type="submit" value="OK">
	</form>
	<a id="loginSim" href="javascript:rolarMenu('down')" style="display:inline">» Fazer login</a>
	<a id="loginNao" href="javascript:rolarMenu('up')" style="display:none">» Cancelar login</a>
	<br>» Cadastre-se já!
	
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito