用HTML，CSS和Jquery滑動登錄面板

使用帶有一些插件的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; 
}

的Javascript

$(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(); 
});

}）;

來源

2012-04-17 jwg2s

'position：float'不是一個有效的屬性。 – JoeJ 2012-04-17 16:06:18

對不起，這已被修復。它應該是相對於推下來的內容，但是不會因此而保持鎖定狀態。 – jwg2s 2012-04-17 16:09:54

我建議讓剩餘的內容在固定div內滾動。

這種方式你永遠不會移動你的div，除非你切換登錄div。但它仍然和現在一樣。

來源

2012-04-17 16:00:39 justanotherhobbyist

用HTML，CSS和Jquery滑動登錄面板

回答

相關問題