Post
Ask Question

Animated Sliding Login Panel Using jQuery


Introduction

In this trticle we are making a cool & simple login / registration system. It will give you the ability to easily create a member-only area on your site and provide an easy registration process.

Step 1: First we have to create a Web Application.

  • Go to Visual Studio 2010.
  • New--> and select the Web Application.
  • Give whatever name you want to.
  • Click OK.
img1.gif

Step 2: Secondly you have to add a new page to the website.

  • Go to the Solution Explorer.
  • Right-click on the project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

img2.gif

img3.gif

Step 3 :  In this step we are adding an image in the "Image" folder of the project.

img4.gif

Step 4 : In this step add the slide.css and style.css files to your Styles folder.

img5.gif

Right-click on both .css files respectively ->copy and paste to the <Head> section of your page. The reference path looks like:

<link rel="stylesheet" type="text/css" href="Styles/style.css" />
<link rel="stylesheet" type="text/css" href="Styles/slide.css" />

Step 5: In this step we are adding the script reference to the aspx page; let us see from where you have to write the script code:

img6.gif

Right-click on selected files respectively -> copy and paste it inside <Head> section of your page; see step 6.

Step 6: Let us see the script code to be added in the <script></script> tags and that will be placed either in the <head> section or the <body> section as you prefer.

<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/slide.js"></script>
<script type="text/javascript" src="Scripts/supersleight-min.js"></script>

Step 7: In this step you will see the body code of the Default2.aspx page which is given below.

Code:

<body>
    <!-- Login -->
   <div style="background-color:Red">
        <div id="panel">
            <div class="content clearfix">
                <div class="left" style ="background-color :#CD5C5C">
                    <h1>
                        Welcome to CSharpCorner.com</h1>
                    <h2>Download</h2>
                    <p>
                       <h3> To download this script go back to </h3> <a href="http://www.c-sharpcorner.com/UploadFile/sapnabeniwal/animated-sliding-login-panel-using-jquery/"
                            title="Download"> Article &raquo;</a></p>
                </div>
                <div class="left" style ="background-color :#8B3A62" >
                    <form class="clearfix" action="#" method="post">
                    <h1 class="padlock">
                        Member Login</h1>
                    <label for="log">
                        Username:</label>
                    <input class="field" type="text" name="log" id="log" value="" size="23" />
                    <label  for="pwd">
                        Password:</label>
                    <input class="field" type="password" name="pwd" id="pwd" size="23" />
                    <label>
                        <input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" />
                        &nbsp;Remember me</label>
                    <div class="clear">
                    </div>
                    <input type="submit" name="submit" value="Login" class="bt_login" />
                    <a class="lost-pwd" href="#">Lost your password?</a>
                    </form>
                </div>
                <div class="left right" style ="background-color :#996699 ">
                    <form action="#" method="post">
                    <h1>
                        Not a member yet? Sign Up!</h1>
                    <label  for="signup">
                        Username:</label>
                    <input class="field" type="text" name="signup" id="signup" value="" size="23" />
                    <label for="email">
                        Email:</label>
                    <input class="field" type="text" name="email" id="email" size="23" />
                    <label>
                        A password will be e-mailed to you.</label>
 
                    <input type="submit" name="submit" value="Register" class="bt_register" />
                    </form>
                </div>
            </div>
        </div>
        <!-- /login -->
        <!-- The tab on top -->
        <div class="tab">
            <ul class="login">
                <li class="left">&nbsp;</li>
                <li>Hello Guest!</li>
                <li class="sep">|</li>
                <li id="toggle"><a id="open" class="open" href="#">Log In | Register</a> <a id="close"
                    style="display: none;" class="close" href="#">Close Panel</a> </li>
                <li class="right">&nbsp;</li>
            </ul>
        </div>
        <!-- / top -->
  </div>
|    <!--panel -->
</body>

 Step 8: In this step we will see the complete code of the Default2.aspx page which is given below.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Animated Sliding Login Panel Using jQuery</title>
<link rel="stylesheet" type="text/css" href="Styles/style.css" />
<link rel="stylesheet" type="text/css" href="Styles/slide.css" />
<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/slide.js"></script>
<script type="text/javascript" src="Scripts/supersleight-min.js"></script>
</head>
<body>
    <!-- Login -->
   <div style="background-color:Red">
        <div id="panel">
            <div class="content clearfix">
                <div class="left" style ="background-color :#CD5C5C">
                    <h1>
                        Welcome to CSharpCorner.com</h1>
                    <h2>Download</h2>
                    <p>
                       <h3> To download this script go back to </h3> <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery"
                            title="Download"> Article &raquo;</a></p>
                </div>
                <div class="left" style ="background-color :#8B3A62" >
                    <form class="clearfix" action="#" method="post">
                    <h1 class="padlock">
                        Member Login</h1>
                    <label for="log">
                        Username:</label>
                    <input class="field" type="text" name="log" id="log" value="" size="23" />
                    <label  for="pwd">
                        Password:</label>
                    <input class="field" type="password" name="pwd" id="pwd" size="23" />
                    <label>
                        <input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" />
                        &nbsp;Remember me</label>
                    <div class="clear">
                    </div>
                    <input type="submit" name="submit" value="Login" class="bt_login" />
                    <a class="lost-pwd" href="#">Lost your password?</a>
                    </form>
                </div>
                <div class="left right" style ="background-color :#996699 ">
                    <form action="#" method="post">
                    <h1>
                        Not a member yet? Sign Up!</h1>
                    <label  for="signup">
                        Username:</label>
                    <input class="field" type="text" name="signup" id="signup" value="" size="23" />
                    <label for="email">
                        Email:</label>
                    <input class="field" type="text" name="email" id="email" size="23" />
                    <label>
                        A password will be e-mailed to you.</label>
 
                    <input type="submit" name="submit" value="Register" class="bt_register" />
                    </form>
                </div>
            </div>
        </div>
        <!-- /login -->
        <!-- The tab on top -->
        <div class="tab">
            <ul class="login">
                <li class="left">&nbsp;</li>
                <li>Hello Guest!</li>
                <li class="sep">|</li>
                <li id="toggle"><a id="open" class="open" href="#">Log In | Register</a> <a id="close"
                    style="display: none;" class="close" href="#">Close Panel</a> </li>
                <li class="right">&nbsp;</li>
            </ul>
        </div>
        <!-- / top -->
  </div>
|    <!--panel -->
</body>
</html>

Step 9: In this step we will see the design of the Default2.aspx page which is given below.

img7.gif

Step 10: In this step we are going to run the Default2.aspx page by pressing F5.

img8.gif

Click on the login Button. We will see an attractive login panel.

img11.gif

Resources


Similar Articles