Introduction:
In this article i will explain how to create stylish drop down menu
like Facebook,Twitter and Linked in etc using jQuery and CSS in asp.net.
Description: In previous articles i explained the Ajax Accordion example to create Vertical DropDown menu in asp.net and Example to implement Jquery form validations in asp.net C#,Vb.net and jQuery to validate file extension and upload image file in asp.net and jQuery to Validate email address using RegularExpression in asp.net and Create registration form and send confirmation email to new registered users and Drag & drop to upload multiple files using AjaxFileUpload like Facebook in asp.net and
Now in this article i am going to
create a drop down menu like the one used on the major sites these days
e.g. Facebook, Linked in mainly for "settings menu" or other menus.
- First of all create a style sheet to give the styles to the drop down menu. So to add style sheet in the website go to website menu and click Add New item.. -> Select StyleSheet.css and rename it to menu.css
- In the menu.css paste the following
body {
}
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: Georgia;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
.dropdown li a:hover
{
background:#3B5998;
color: #FFFFFF;
text-decoration: none;
}
a.mainmenu
{
font-size: 14px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px
17px no-repeat;
cursor:pointer;
}
.menuitems
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
.icon{
color: #0099FF;
}
.toggle-login
{
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
and save the file.
and save the file.
- In the <Head> tag of the design page (.aspx) add the following jQuery reference and functions.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<%--Toggles the
icon ▼--%>
<script type="text/javascript">
$(document).ready(function () {
$('.toggle-login').click(function
() {
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
</script>
<%--Handling
Menu and items--%>
<script type="text/javascript"
>
$(document).ready(function () {
$(".mainmenu").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id',
'0');
}
else {
$(".submenu").show();
$(this).attr('id',
'1');
}
});
//Mouse click on sub menus
$(".submenu").mouseup(function () {
return false
});
//Mouse click on my account link
$(".mainmenu").mouseup(function () {
return false
});
//On Document Click
$(document).mouseup(function () {
$(".submenu").hide();
$(".mainmenu").attr('id', '');
});
});
</script>
- In the <form> tag of .aspx page design the page as
<div>
<fieldset style="width:119px; height:160px; padding:30px;" >
<legend>jQuery Dropdown</legend>
<div class="dropdown">
<a class="mainmenu toggle-login">My Account <span class="icon">▼</span></a>
<div class="submenu">
<ul class="menuitems">
<li ><a href="#">Account setting</a></li>
<li ><a href="#">Privacy setting</a></li>
<li ><a href="#">Logout</a></li>
<li ><a href="#">Help</a></li>
</ul>
</div>
</div>
</fieldset>
</div>
Now over to you:
"If you like my work; you can appreciate by leaving your comments,
hitting Facebook like button, following on Google+, Twitter, Linked in and
Pinterest, stumbling my posts on stumble upon and subscribing for receiving
free updates directly to your inbox . Stay tuned and stay connected for more
technical updates."
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..