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
<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>
