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

Implementation: 
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>

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

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

<div>
    <nav>
         <ul>
            <li id="login">
                 <a id="login-trigger" href="#">
                                Log in <span>?</span>
                                  </a>
                                  <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>
                                      <fieldset id="actions">                                                                              
                        <asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="submit"
                            onclick="btnLogin_Click"></asp:Button>                                                                          
                 <asp:CheckBox ID="chkRemember" runat="server" Checked="true"></asp:CheckBox>Remember me
                                                  </fieldset>
                 <a href="#" style="float:right;">Forgot password?</a>
                                </div>  
                   
                                </li>
                                <li id="signup">
                               <a href="#">Sign up</a>
                                </li>  
              </ul>
                   </nav>
                           </div>

You can also add some style sheets to this application.



0 comments

Post a Comment