<!DOCTYPE HTML>
<html>
<head>
<style>
body, #main_wrap {width:100%; margin:0; height:200px; border:1px solid grey;}
#toppanel {
width:100%;
position:fixed;
z-index: 999;
margin:0px;}
#toppanel a {cursor:pointer;}
#toppanel:focus {outline: none;}
#panel {
height:50px;
padding:10px;
background-color:#ddd;
position: relative;
z-index: 3;
display: none;}
#toppanel .login_tab {
position: relative;
top: 0;
z-index: 999;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
<div id="toppanel">
<div id="panel">
<div class="content_panel clearfix_panel">
<input type='text' id='fld1' size='10' name='req_username' value=''>
<input type='password' id='fld2' size='10' name='req_password' value=''>
</div>
</div>
<div class="login_tab">
<span id="toggle">
<a id="open" class="open">Открыть панель</a>
<a id="close" style="display: none;" class="close">Закрыть панель</a>
</span>
</div>
</div>
<div id="main_wrap"><p style="font-size:100px; margin:0; text-align:center;">Контент</p></div>
<script>
$(document).ready(function() {
// Сворачиваем панель
$("#close").click(function(){
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
});
// Сворачиваем при клике на области вне панели
$("#main_wrap").click(function(){
if ($("a#open:visible").length === 0) {
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
}
});
// Разворачиваем панель
$("#open").click(function(){
$("div#panel").slideDown("slow");
$("#toggle a").toggle();
});
});
</script>
</body>
</html>