Skip to main content

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:


<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 function hidediv() {
var hide=document.getElementById("box1");

if (hide.style.visibility != 'hidden') { // DOM3 = IE5, NS6
hide.style.visibility = 'hidden';
}
else if (hide.style.visibility != 'visible') { // DOM3 = IE5, NS6
hide.style.visibility = 'visible';
}
else {
hide.all.style.visibility = 'hidden';
}
}
</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.
Labels:

Comments

Post a Comment

your Comment is sent for moderation, Thankyou

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.
Post a Comment
Read more

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model
Post a Comment
Read more

Eden: PHP Library To Get Things Easy For PHP Developer

Eden is PHP Library designed for helping developers in their rapid development work. In Our most of the project we have to integrate our developed website or application with most of  the social networking websites like Google, Facebook, Twitter, yahoo etc. so what we do is we integrate libraries of different websites differently Although We could make the code reusable but still if the websites increases then confusion will also increases. Adding different libraries form different sources add more complexity to your project and ends up to be hard to maintain. Eden simply a set of reusable components, that works with any PHP framework and CMS. Eden makes code logical and readable with dead simple syntax. Eden Will work With Most Of Web services including Amazon Web service Facebook Foursquare Google twitter tumbler Paypal Yahoo You could Download the File From  Eden Official Website  and Can use this will just a simply including this...
2 comments
Read more