Designing a dynamic sliding login panel utilizing Html, CSS, and jquery alongside various plugins.
Check it out here: http://24.125.42.135/
When activated, the bar smoothly pushes down the content (click on the login option at the top right corner). This functionality works perfectly if you are on the initial screen of the webpage. However, when attempting to log in from the second screen onwards, the login bar is not visible.
I'm currently stuck conceptually on how to ensure that the login button remains fixed at the top along with the rest of the menu, while still being able to push the content downwards no matter where you are positioned on the page.
HTML
<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
...
</div>
<div class="left right">
...
</div>
</div>
</div;
<div class="tab">
...
</div>
</div>
CSS
/* sliding panel */
#toppanel {
position: relative;
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");
});
// Toggle buttons between "Log In | Register" and "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});