An easy way to create login panel with jQuery and CSS

A small script to introduce a sliding login box into your website, just as you see in Twitter login page. The script comprises jQuery and CSS techniques to display this arty feature. Checkout the code below and try it yourself or simply download the ready to use files.
Feb 09, 2010 CSS, jQuery, Tutorials

Among many studies conducted to find out just what influences people’s perception of a website’s credibility, one interesting finding is that users really do judge a book by its cover… or rather, a website by its design.

Rapid changes in design trends are driving focus towards its usability. More and more features are being zipped into a plain and simple design for users to get bountiful results without spending more than a jiffy. The back-end coding is the key device to achieve this simplicity in design.

Keeping this mind, I’ve designed a small script to introduce a sliding login box into your website, just as you see in Twitter login page. The script comprises jQuery & CSS techniques to display this arty feature. Checkout the code below and try it yourself or simply download the ready to use files.

HTML

<div id="demo-header">

	<!-- Code for Login Link -->
	<a id="login-link" title="Login" href="#login">Clients Area</a>

	<!-- Code for login panel -->
	<div id="login-panel">
		<form action="" method="post">
			<label>Username: <input type="text" name="username" value="" /> </label>
			<label>Password: <input type="password" name="password" value="" /> </label>
			<input type="submit" name="submit" value="Sign In" /> <small>Press ESC to close</small>
		</form>
	</div>

</div>

CSS

<style type="text/css">

    a{text-decoration:none;}

    #demo-header{
        width: 980px;
        margin: 0 auto;
        position: relative;
    }
    #login-link{
        position: absolute;
        top: 0px;
        right: 0px;
        display: block;
        background: #2a2a2a;
        padding: 5px 15px 5px 15px;
        color: #FFF;
    }
    #login-panel{
        position: absolute;
        top: 26px;
        right: 0px;
        width: 190px;
        padding: 10px 15px 5px 15px;
        background: #2a2a2a;
        font-size: 8pt;
        font-weight: bold;
        color: #FFF;
        display: none; 
    }
    label{
        line-height: 1.8;
    }
</style>

jQuery

Call jQuery in <head></head> tags of the document
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>

<script type="text/javascript">

	// jQuery to apply actions to the link
	$(document).ready(function(){
	    $("#login-link").click(function(){
	        $("#login-panel").slideToggle(200);
	    })
	})

	//jQuery to apply actions to the ESC key
	$(document).keydown(function(e) {
	    if (e.keyCode == 27) {
	        $("#login-panel").hide(0);
	    }
	});

</script>

View Demo

What more features can I zip for you? Do let me know in the comments.

  • Very very Nice! I’ll try it to my site as soon as. Thank you for post.

  • HR

    best one yaar… let me try to put on my blog site

    thanks once again

    • KeithM

      Simple and elegant slide-in. Very fluid. Easy to customise. Love it. Thanks for posting.

  • Sweeet. I’ve come across similar tutorials but I really like the way this one works. Code looks clean. Thanks.

  • Tanks a lot for this post.
    I like simple login panel.

  • Fully loving that, quite slick with the animation, pressing the escape key-could that not be functionised and made into a close button on the top right of the dialog box which drops down.

    How does this application handle error messages with login?

    • You can use Ajax with jQuery or other frameworks to handle errors and other actions.

  • very nice panel thanks

  • thank you for post it is very nice thanks again

  • Thank you, it looks great. Can I use it for commercial sites?

    • Sure, you are free to use this code on any project you do πŸ™‚

  • Master

    Tanks a lot for this post.
    I like simple login panel.I have 1 site to share with your .
    Professiona and top page rank guide for beginners
    https://www.tutorials99.com

  • Thanks alot for the post…and the design is simple and clean too! Where do I insert the code, in wordpress blogs…will it be in the header ?

  • I have been to your site half a dozen times now, and this time I am adding it to my bookmarks πŸ™‚ Your discussions are always relevant, unlike the same-old stuff on other sites (which are coming off my bookmarks!) Rock on!

    • Thanks, I am glad you like what I share..

  • Smooooooooth!

    I wonder if it is just that no one knows about these elegant little jQuery functions or they are too lazy to implement them…? Whatever the answer I’m not going to fall into the trap, this code is going on to all future projects of mine! Thanks again Mohit!

  • Hi there! I’m an old WordPress user and love blogging and modifying themes to add personal touch to my blog. But I’m completely new to CSS designing and haven’t yet stepped into learning PHP and Javascript or jQueries (what are the differences?). So, I’m a little confused which code to place where. I mean, let’s say the CSS code will be placed in the stylesheet page, right? And what about xHTML and jQuery? Where do I place them?

    Hopefully you will help me understand it. Thanks in advance.

  • Hans

    Must say! This is a nice and clean code example, you are rocking man!!!
    Many thanks to you bro!!

    Keep up the god work!!

    Hans

    • Thanks, I am glad you like it.. Stay tuned for more..

  • cool, simple panel, how can i add “Remember me” checkbox to it?

    thank you.

    • You can add any form tags in the HTML code and add functionality as per your requirements.

  • good post to create best admin panel)

  • I have tried the code and it works well with my blog. Thanks for giving up the code. The code are well managed and if there’s a bug it’s easy to locate and fix.This is one of those login panel I love to put in my sites because I have found other to be like this which is quite similar.

    • I m glad you like it.. stay tuned for more…

  • Ardy

    hello
    This is cool man
    would you like to tell me how to erase black top border, i just only need box of client area, i am new one in web design πŸ™‚

    Thanks a lot

    • You can edit the CSS and remove the styles.

  • Philip

    Thanks you very much for sharing your knowledge with us,
    i try to add 3 links with different content in each drop box but i can;t find how to do this,

    i need to duplicate the function? or i can add some (“#login-link,#link2,#link3”)

    thanks a lot again

    all the best!

    • If you need different content then you would need to duplicate the function or else you can use multiple selectors to have the same functionality.

  • Thanks you for sharing this code its working great …

  • yogesh kanthale

    its really helpful thanks for that

  • Yogesh Singh

    very use full dude !!!! thanks

  • Great post, it is nice to have people sharing good code to help the community.

    • Thanks!! Stay tuned for more.. I don’t post much due to my busy schedule, however whenever I have time, I publish something worth sharing πŸ˜‰

  • Anders

    Really good tutorial, was not hard to implement it either.

    But i wonder, is it hard to modify it so the box goes away if you click anywhere else on the page?

    • Nope its not hard, you can use jQuery mouseout event to accomplish this task.

  • saboo

    very nice

  • Nitesh Chauhan

    hello, this post was really amazing.. thanx i am not into UI development but i am intrested in learning it. this was helpful.

  • cye

    i’m going to use this.. thanks!!!

  • Thanks for sharing this simple and nice code with us, just one note on this css code:
    # #login-panel{
    # position: absolute;
    # top: 26px;
    # rightright: 0px;
    ….}

    I think there is a mistake on the last line on login-panel identifier and need to be modified to right:0px

    thanks again πŸ™‚

  • pramod

    thankyou,
    but I need to validate the username and password in php and then rediect to index page if its the right user and if not the dialog box should remain still showing invalid username or password

  • Rakesh Mishra

    Thanks.

  • Guy

    And iPad has no Mouseout click, so the panel does not disappear with a touch outside the box. Maybe add a link inside the script (or cross) with a CLOSE-link?

    press ESC or close

    $(“#login-close”).click(function() {
    $(“#login-panel”).hide(0);
    return false;
    });

  • Hi Mohit,

    Thanks a ton for this article! It helped me a lot in my recent project.

    BR,
    Shubhamoy

  • Chris

    Lovely tutorial – have implemented it on my site.

    Thanks.

  • vem

    ..thank yo for this code it will help me to finish my project..keep on posting like this code
    God bless

  • Simple and works perfectly, awesome job and thanks!

  • heng

    pretty cool login! i will use this for my website.

  • Web Design Lancashire

    A perfect little addition to any website. Thanks for sharing.

  • I really like your post works fantactic. Just wondering if you could of help with this. I woul like to add a feature to javascript so the user can close the pop up log in box by clicking outside of it rather then using esc or to have both options? thanks

    • For this you can use use CSS or jQuery :hover to show the inner DIV, remember you need to add hover to the parent and it should wrap the form and other stuff.

  • autism treatments

    I just couldn’t go away your website prior to suggesting that I really enjoyed the usual information a person provide for your visitors? Is gonna be back frequently in order to check up on new posts

  • jamie

    Luv this code, but how do I set the username and password?
    How can I redirect the page after logging in?
    Please help!

    • You would need to use server side language like PHP or ASP.net for that functionality.

  • Thirry

    Where do you place these files and will it connect to either wp_members or s2members?

  • haitham

    hello i want to use such thing in my web site
    but i reall dunno why u type css and jquery code like this i cant eveb read and why between %%

  • Draveos

    Thanks so much for this code snippet. Works great and adds a modern look to any website lacking creativity! πŸ™‚

  • Sourabh

    I had created jquery.js file and called from html page inside head tag but it is not excecuting can you send me steps how to execute.

    • Once you embed jQuery in the head tags, create another file for the website to write your own JS code. Make sure you call that file below the jquery script tag.

  • Hi there would you mind letting me know which web host you’re working with? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot quicker then most. Can you suggest a good internet hosting provider at a reasonable price? Many thanks, I appreciate it!

    • I use Hostgator, but mostly its the code that makes it faster.

  • kamran pakistani

    nice sir .thanxs

  • stupil

    super,thanks you