Publicado em 12 de out.

Barra para usuarios

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!

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

klonder· 12 de out.

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"](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>