title: Sliding Login Panel with HTML, CSS, Jquery
body: <p>Working on a sliding login panel using Html, CSS and jquery with some plugins.</p>
  
  <p><a href="http://24.125.42.135/" rel="nofollow">http://24.125.42.135/</a></p>
  
  <p>As you can see, the bar pushes the content downwards when activated (click login at top right).  This is great if you are on the first screen.  However, if you are on the second screen and then try to press login, the bar is not there.  </p>
  
  <p>I'm stumped conceptually on what to do here so that the login button remains fixed at the top like the rest of the menu, but still pushes the content down no matter where you are on the page.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- Panel --&gt;
      &lt;div id="toppanel"&gt;
          &lt;div id="panel"&gt;
              &lt;div class="content clearfix"&gt;
                  &lt;div class="left"&gt;
                      &lt;!-- Login Form --&gt;
                      &lt;form class="clearfix" action="#" method="post"&gt;
                          &lt;h1&gt;Sign In&lt;/h1&gt;
                          &lt;label class="grey" for="log"&gt;Username:&lt;/label&gt;
                          &lt;input class="field" type="text" name="log" id="log" value="" size="23" /&gt;
                          &lt;label class="grey" for="pwd"&gt;Password:&lt;/label&gt;
                          &lt;input class="field" type="password" name="pwd" id="pwd" size="23" /&gt;
                          &lt;label&gt;&lt;input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /&gt; &amp;nbsp;Remember me&lt;/label&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;input type="submit" name="submit" value="Login" class="bt_login" /&gt;
                          &lt;a class="lost-pwd" href="#"&gt;Lost your password?&lt;/a&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="left right"&gt;            
                      &lt;!-- Register Form --&gt;
                      &lt;form action="#" method="post"&gt;
                          &lt;h1&gt;Not a member yet? Sign Up!&lt;/h1&gt;             
                          &lt;label class="grey" for="signup"&gt;Username:&lt;/label&gt;
                          &lt;input class="field" type="text" name="signup" id="signup" value="" size="23" /&gt;
                          &lt;label class="grey" for="email"&gt;Email:&lt;/label&gt;
                          &lt;input class="field" type="text" name="email" id="email" size="23" /&gt;
                          &lt;label&gt;A password will be e-mailed to you.&lt;/label&gt;
                          &lt;input type="submit" name="submit" value="Register" class="bt_register" /&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; &lt;!-- /login --&gt;  
  
          &lt;!-- The tab on top --&gt; 
          &lt;div class="tab"&gt;
              &lt;ul class="login"&gt;
                  &lt;li class="left"&gt;&amp;nbsp;&lt;/li&gt;
                  &lt;li id="toggle"&gt;
                      &lt;a id="open" class="open" href="#?signin"&gt;Log In | Register&lt;/a&gt;
                      &lt;a id="close" style="display: none;" class="close" href="#"&gt;Close Panel&lt;/a&gt;         
                  &lt;/li&gt;
                  &lt;li class="right"&gt;&amp;nbsp;&lt;/li&gt;
              &lt;/ul&gt; 
          &lt;/div&gt; &lt;!-- / top --&gt;
  
      &lt;/div&gt; &lt;!--panel --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(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();
  });
  </code></pre>
  
  <p>});</p>