滑动登录面板与HTML，CSS，Jquery

使用Html，CSS和jquery以及一些插件在滑动登录面板上工作。

http://24.125.42.135/

如您所见，激活时，该栏会向下推送内容（单击右上角的登录）。 如果您在第一个屏幕上，那就太好了。 但是，如果您在第二个屏幕上，然后尝试按登录，则该栏不存在。

我在概念上对在这里做什么感到困惑，以便登录按钮像菜单的其余部分一样固定在顶部，但无论您在页面上的哪个位置，您仍然会向下推送内容。

.HTML

<!-- Panel -->
    <div id="toppanel">
        <div id="panel">
            <div class="content clearfix">
                <div class="left">
                    <!-- Login Form -->
                    <form class="clearfix" action="#" method="post">
                        <h1>Sign In</h1>
                        <label class="grey" for="log">Username:</label>
                        <input class="field" type="text" name="log" id="log" value="" size="23" />
                        <label class="grey" for="pwd">Password:</label>
                        <input class="field" type="password" name="pwd" id="pwd" size="23" />
                        <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> &nbsp;Remember me</label>
                        <div class="clear"></div>
                        <input type="submit" name="submit" value="Login" class="bt_login" />
                        <a class="lost-pwd" href="#">Lost your password?</a>
                    </form>
                </div>
                <div class="left right">            
                    <!-- Register Form -->
                    <form action="#" method="post">
                        <h1>Not a member yet? Sign Up!</h1>             
                        <label class="grey" for="signup">Username:</label>
                        <input class="field" type="text" name="signup" id="signup" value="" size="23" />
                        <label class="grey" for="email">Email:</label>
                        <input class="field" type="text" name="email" id="email" size="23" />
                        <label>A password will be e-mailed to you.</label>
                        <input type="submit" name="submit" value="Register" class="bt_register" />
                    </form>
                </div>
            </div>
        </div> <!-- /login -->  
        <!-- The tab on top --> 
        <div class="tab">
            <ul class="login">
                <li class="left">&nbsp;</li>
                <li id="toggle">
                    <a id="open" class="open" href="#?signin">Log In | Register</a>
                    <a id="close" style="display: none;" class="close" href="#">Close Panel</a>         
                </li>
                <li class="right">&nbsp;</li>
            </ul> 
        </div> <!-- / top -->
    </div> <!--panel -->

.CSS

/* sliding panel */
#toppanel {
    position: relative;   /*Panel will overlap  content */
    /*position: relative;*/   /*Panel will "push" the content down */
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

爪哇语

$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
    $("div#panel").slideDown("slow");   
});
// Collapse Panel
$("#close").click(function(){
    $("div#panel").slideUp("slow");
}); 
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
    $("#toggle a").toggle();
});

}）;