We
can create interactive and stylist menus by using Jquery and CSS. With the help
of jquery it is easy to create dropdown type menus. In this article I
am going to demonstrate with example how to create stylish drop down menu for log in /
sign in and signup / register that open and close on click using jQuery and CSS in
asp.net.
In my example, I have just
demonstrated the drop down menu on log
in click. Similarly you can open
signup form on sign up click.
Steps to demonstrate the Concept:
1.
Create
a style sheet which includes styles for the drop down menu we are going to
create. So to add style sheet in
the website go to website menu and click Add New item. -> Select
StyleSheet.css and leave the name as it is (i.e. Stylesheet.css)
2.
In
the Stylesheet.css paste the
following and save
the file.
body {
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #eee;
border-bottom: 1px
solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
nav li {
float: left;
}
nav #login {
border-right: 1px
solid #ddd;
-moz-box-shadow: 1px
0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px
0 0 #fff;
background: #eee;
}
nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0
8px;
text-decoration: none;
color: #444444;
background:#eeeeee;
}
nav #signup a {
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0
3px 3px 0;
background: #eeeeee;
}
nav #login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px
0 0 3px;
}
nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
background:#B63E09;
color:#ffffff;
}
nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#665035), to(#fff));
background-image: -webkit-linear-gradient(top, #665035, #fff);
background-image: -moz-linear-gradient(top, #665035, #fff);
background-image: -ms-linear-gradient(top, #665035, #fff);
background-image: -o-linear-gradient(top, #665035, #fff);
background-image: linear-gradient(top, #665035, #fff);
padding: 15px;
-moz-box-shadow: 0
2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0
2px 2px -1px rgba(0,0,0,.9);
-moz-border-radius: 3px 0 3px 3px;
-webkit-border-radius: 3px 0 3px 3px;
border-radius: 3px
0 3px 3px;
}
nav li #login-content
{
right: 0;
width: 280px;
}
/*--------------------*/
#inputs input {
background: #f1f1f1;
padding: 6px
5px;
margin: 0
0 5px 0;
width: 238px;
border: 1px
solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0
1px 1px #ccc inset;
-webkit-box-shadow: 0 1px 1px #ccc inset;
box-shadow: 0
1px 1px #ccc inset;
}
#inputs input:focus {
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0
0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0
0 0 1px #e8c291 inset;
}
/*--------------------*/
#login #actions {
margin: 10px
0 0 0;
}
#login .submit {
background-color: #3F80EC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f06015),
to(#f88e11));
background-image: -webkit-linear-gradient(top, #f06015, #f88e11);
background-image: -moz-linear-gradient(top, #f06015, #f88e11);
background-image: -ms-linear-gradient(top, #f06015, #f88e11);
background-image: -o-linear-gradient(top, #f06015, #f88e11);
background-image: linear-gradient(top, #f06015, #f88e11);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0
1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0
0 1px rgba(0, 0, 0, 0.3), 0
1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.3)
inset;
box-shadow: 0
0 1px rgba(0, 0, 0, 0.3), 0
1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px
solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold
14px Arial, Helvetica;
color: #fff;
}
#login .submit:hover,
#login .submit:focus {
background-color: #e97171;
background-image: -webkit-gradient(linear, left top, left bottom, from(#B63E09),
to(#B63E09));
background-image: -webkit-linear-gradient(top, #B63E09, #B63E09);
background-image: -moz-linear-gradient(top, #B63E09, #B63E09);
background-image: -ms-linear-gradient(top, #B63E09, #B63E09);
background-image: -o-linear-gradient(top, #B63E09, #B63E09);
background-image: linear-gradient(top, #B63E09, #B63E09);
}
#login .submit:active {
outline: none;
-moz-box-shadow: 0
1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5)
inset;
box-shadow: 0
1px 4px rgba(0, 0, 0, 0.5) inset;
}
#login .submit::-moz-focus-inner {
border: none;
}
#login label {
float: right;
line-height: 30px;
}
#login label input {
position: relative;
top: 2px;
right: 2px;
}
In the
<Head> tag of the design page(.aspx) add the jQuery reference and
function and also set reference to style sheet.
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<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>
0 comments:
Post a Comment