How to Build Drop-Down Login Area Using Javascript

Here I have a special trick to build drop-down login area using javascript with just a single click of your mouse button. With this simple javascript code you can build your own login area with drop down animation.
It will give you feel you of Twitter login area. Twitter had used jquery but here i will show you this without using jquery.
Just create a HTML file add Javascript in its head section and attach css file with HTML page. Now run the page and see output.
Its a simple javascript code of 8-9 lines. This function is called on button and click event is generated which perform its desired task.
Save this HTML file and CSS file and name that css file as "style .css".
Save these files in same folder.This is just demo to show you how it works.

HTML CODE:

</script>
<title> login</title>
</head>
<body>
<div id="wrapper">
<div id="btn" onclick="hidediv()"> login</div>
<div id="box1">
<form name="myform" action="login.html" method="post" >
<table border="0" cellspacing="5px" cellpadding="1px">
<tr><td>Email/Username:</td>
<td><input id="email" name="email" type="textfield" required/></td>
<td><p id="fname"></p></td>
</tr>
<tr>
<td>Password:</td>
<td>
<input id="password" name="password" type="password" required/></td>
<td><p id="lname"></p></td>
</tr>
<tr>
<td>
</br><input type="submit" id="btn1" value="Signin"></button>
</td>

</tr>
</table>
</br><a href="#">Forgot your Password</a>
</form>

</div>

</div>
</body>
</html>

CSS Code:

#wrapper{
margin:2px 80px 0px 80px;
width:100%;
height:100%;

border:0px solid black;
}
body{

    background-repeat:no-repeat;
    background-color:#04346c;
    }
#form{
background-color:#ddeef6;
font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    font-weight:500;
    text-align:center;
    padding-left:30px;
    height:auto;
    color:#3F849A;
    margin-right:200px;
    margin-left:200px;
    width:70%;
    }

table{
color:#015965;
text-align:center;
}
input{
border:1px solid orange;
height:28px;
width:150px;
border-radius:4px;
line-height:30px;
}
input:hover{
border:1px solid green;
}
#btn {
height:26px;
width:60px;
color:#33E6B;;
background-color:#66A3D2;
border-radius:8px;
text-align:center;
color:#015965;

}
#btn a{
color:#3F849A;
background-color:#66A3D2;
text-decoration:none;
}
#btn:hover{
background-color:#5FC0CE;
}
#btn1{
height:26px;
width:60px;
background-color:#38B2CE;
color:#015965;
}
#btn1 a{
background-color:#015965;
}
#btn1 a:hover{
background-color:#60B9CE;
}
a{
color:#ddeef6;
text-decoration:underline;
}
a:hover{
color:#3F849A;
}
#box1{
width:270px;
height:180px;
position:relative;
visibility:hidden;
padding:12px 30px 0px 5px;
background-color:#66A3D2;
border-radius:12px;
}
Hope you will like this post.

Sarwara's Blog

Search This Blog