Message # 1 | 0:21 AM 2014-04-09
This is code for drop down login that slides down on clicking login icon, and hide on clicking the login icon again

Position of login icon and form block can be changed by changing the value of red styles, also when you make changes position of one must equal two and also image link must be same for both

Demo [click the login icon on my site (Top-Right)]

<style>
#one {
display:block;
position:absolute;
top:50px;
right:90px;
cursor:pointer;
}

#two {
display:none;
position:absolute;
top:50px;
right:90px;
cursor:pointer;
}

#sblock {
display:none;
background: #E9E9E9;
top: 100px;
right:80px;
padding: 10px;
position: absolute;
width: 200px;
}
</style>

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$("#one").on('click', function() {
$("#sblock").slideDown(450);
$("#two").show();
$("#one").hide();
});
$("#two").on('click', function() {
$("#sblock").slideUp(450);
$("#one").show();
$("#two").hide();
});

});//]]>
</script>

<img src="image link" id="one">
<img src="image link" id="two">

<div id="sblock">
LOGIN FORM GOES HERE
</div>

*There is an error in the description of this thread, it says search icon instead of login icon
Post edited by NormalX - Wednesday, 2014-04-09, 0:58 AM