Powered by Blogger.

Thursday, February 27, 2014

How to create dropdown menu for login and signup using jQuery in asp.net ?

Here in this article, we will discuss how to create drop down menu for login and signup using jQuery.
You can also check my previous posts on:

- How to find the difference in retrieving data with and without using index in sql server 2008?

- Collections in C#.Net

- Page.IsPostBack Property in Asp.Net

Let's see an example to see the menu in working.
In the <Head> tag of the design page(.aspx) add the jQuery reference and  function.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

    <script type="text/javascript">
        $('#login-trigger').click(function () {
                                if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
                                                else $(this).find('span').html('&#x25BC;')

In the <form> tag of the design page(.aspx) design the page as:

            <li id="login">
                 <a id="login-trigger" href="#">
                                Log in <span>?</span>
                                  <div id="login-content">
                                     <fieldset id="inputs">                                                                                
      <asp:TextBox ID="txtUserName" runat="server" placeholder="Your email address" type="email" required></asp:TextBox>                                                                                      
       <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder="Password" required></asp:TextBox>
                                      <fieldset id="actions">                                                                              
                        <asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="submit"
                 <asp:CheckBox ID="chkRemember" runat="server" Checked="true"></asp:CheckBox>Remember me
                 <a href="#" style="float:right;">Forgot password?</a>
                                <li id="signup">
                               <a href="#">Sign up</a>

You can also add some style sheets to this application.