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('▲')
else $(this).find('span').html('▼')
})
});
</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.
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('▲')
else $(this).find('span').html('▼')
})
});
</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.
