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>

See Our Portfolio