We can create different type of menus
in ASP.NET using CSS and Jquery. Using
css we can create stylish menus like facebook linked in etc with the help of
jquery.
Now in this
article i am going to create a drop down menu like the one used on the popupar sites
these days e.g. Facebook, Linked
in mainly for "settings menu" or other menus.
Steps we
follow to demonstrate the Concept:
1.
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
2.
In
the menu.css paste the following
code.
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 CDN
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>
Page Design
Section:
<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>
0 comments:
Post a Comment