Today I am going to share Sliding Login Form Top Panel using Jquery & CSS3. This is more attractive and elegant.  We can use this panel for user admin purposes as well as login form.

Javascript Code

<pre>$('.log').live('click', function(e){
		var item = $(this), cl_name = 'log_active';
		if(item.hasClass(cl_name)){
			$('.log_hide, .log_hide .center').animate({
				height : 6
			}, 1000 , function(){
				item.removeClass(cl_name);	
			});
			$('.login_container').animate({
				height : 'hide'
			}, 1000);
			$('#lkey').html('Open');
		}else{
			$('.log_hide, .log_hide .center').animate({
				height : 115
			}, 1000 , function(){
				item.addClass(cl_name);	
			});
			$('.login_container').animate({
				height : 'show'
			}, 1000);
			$('#lkey').html('Close');
			
		}
		e.preventDefault();
});
</pre>

Html Code

<pre><div class="log_hide"> 
		<div class="log_hide_inner"> 
			<div class="center">
				<div class="login_container">
					<div class="log_ic">User Login</div>
					
		<form name="loginform" id="loginform" action="#" method="post">
			
			<p class="login-username">
				<label for="user_login">Username</label>
				<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" />
			</p>
			<p class="login-password">
				<label for="user_pass">Password</label>
				<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" />
			</p>
			
			<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
			<p class="login-submit">
				<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
			</p>
			
		</form>					
					<div class="clearb"></div>
				</div>
				<a href="#" class="log"> <br /><h1 id="lkey">Open</h1></a>
			</div>
		</div> 
</div>
</pre>

View Demo Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/01/sliding-login-form-css1.pnghttp://w3lessons.info/wp-content/uploads/2012/01/sliding-login-form-css1-150x150.pngKarthikeyan KCSS3FreebiesjqueryWeb DesignCascading Style Sheets,CSS3,Design,Jquery,Login form,slider,top bar
Today I am going to share Sliding Login Form Top Panel using Jquery & CSS3. This is more attractive and elegant.  We can use this panel for user admin purposes as well as login form.Javascript CodeHtml CodeView Demo Download