jQueryを使ったスライドするログインバーを紹介します。
スクリプト部分は非常に単純で、JQueryを読み込んだ後、任意のボタンにJQueryのメソッドslideToggle()を実行するだけです。

CodePen: https://codepen.io/zionboogie/pen/mQpQmO

JavaScript

// ログイン用
$(function(){
	$('a#link-login').click(function(){$('div#client-login').slideToggle(); return false;});
	$('button#btn-login').click(function(){alert("ok");$('div#client-login').slideToggle(); return true;});
	$('div#client-login').css('display', 'none');
});
</script>

HTML

<div id="box-login">
	<form action="" method="post" target="_blank">
		<label for="username">ユーザ名:</label><input id="username" name="username" type="text" class="txtbox" />
		<label for="password">パスワード:</label><input id="password" name="password" type="password" class="txtbox" />
		<button id="btn-login">ログイン</button>
	</form>
</div>
<div class="topnavi">
	<a href="#" id="link-login">ログインする</a>
</div>