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>
What more features can I zip for you? Do let me know in the comments.
Comments on An easy way to create login panel with jQuery and CSS