[英]Highlight current page menu item. Also highlight main menu item when sub menu item is selected
I am working on a project in ASP.net using C#. 我正在使用C#开发ASP.net中的项目。 I have a masterpage in which there is a menu with sub menus for some menu items. 我有一个母版页,其中有一个菜单,其中包含一些菜单项的子菜单。
I want the current page menu item be highlighted when selected. 我希望当前页面菜单项在选中时突出显示。 Also I want the main menu item be highlighted when any of the sub menu items are selected or their link is opened in the same page. 另外,我希望在选择任何子菜单项或在同一页面中打开其链接时突出显示主菜单项。
Any idea or solution using CSS or Javascript is expected. 任何使用CSS或Javascript的想法或解决方案都是可以预期的。 I have searched for solution on this forum but my requirements are different so i have failed till now to find a feasible one. 我已经在该论坛上搜索了解决方案,但是我的要求有所不同,因此到目前为止,我一直没有找到可行的解决方案。
<pre>
Javascript:
<script src="../Scripts/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#nav').find('li a').click(function () {
$('#nav').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
</script>
</pre>
<pre>
CSS:
#nav {
height: 50px;
width: auto;
position: relative;
background-color: #ad8f5d;
}
#nav ul li {
width:150px;
text-align:center;
}
#nav ul li a
{
color: Black;
font-size: 13px;
font-weight: bold;
line-height:50px;
text-decoration: none;
}
#nav li a.active
{
color:White;
}
#nav ul li a.has_submenu {
background: transparent url('../Images/submenu-item.jpg') no-repeat scroll right center;
padding-right: 0px;
}
#nav ul li a.has_submenu:hover, #nav ul li.sfHover a.has_submenu {
background-image: url('../Images/submenu-item-hover.jpg');
}
#nav ul ul li a.has_submenu {
background: transparent url('../Images/submenu-item-invert.jpg') no-repeat scroll right center;
padding-right: 0px;
}
#nav ul ul li a.has_submenu:hover, #nav ul ul li.sfHover a.has_submenu {
background-image: url('../Images/submenu-item-hover-invert.jpg');
}
#nav ul ul li a {
float: none;
width: 170px;
}
#nav ul > li:hover > a
{
background-color: #1f478d;
}
#nav ul ul > li:hover > a
{
background-color: #1f478d;
}
/*--------------------------Item Image Hover change---------------------CSS----*/
#nav ul > li:hover > a.has_submenu
{
background-image: url('../Images/submenu-item-hover.jpg');
}
#nav ul ul > li:hover > a.has_submenu
{
background-image: url('../Images/submenu-item-hover-invert.jpg');
}
/*--------------------------Item Image Hover change---------------------CSS ends----*/
#nav ul li a:hover, #nav ul li.sfHover a{
background-color: #1f478d;
}
#nav ul ul a
{
background-color: #ad8f5d;
}
#nav ul li li a:hover, #nav ul li.sfHover li a:hover {
background-color: #1f478d;
}
.sf-menu, .sf-menu *
{
height:50px;
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 200px;
margin-top: 0px;
padding-top: 0;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit;
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 49px;
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 170px;
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em;
top: 0;
}
</pre>
<pre>
HTML:
<div id="nav">
<ul class="sf-menu">
<li class="menu-item"><a href="Home.aspx">Home</a></li>
<li class="menu-item"><a class="has_submenu" href="#">Examples</a>
<ul>
<li><a href="Static.aspx">Static Text Page</a></li>
<li><a href="#">Static Frontpage</a></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
<li class="menu-item"><a class="has_submenu" href="#">Products</a>
<ul>
<li><a href="Product.aspx">Product One</a></li>
<li><a href="#">Product Two</a></li>
<li><a href="#">Product Three</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Solutions</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</div>
</pre>
Use this code, if you need more then ask me. 使用此代码,如果您需要更多,请询问我。
$(document).ready(function () {
$('.menu-item').click(function () {
alert("S");
$('.menu-item a').css("color","black");
$(this).find('a').css("color","red");
// $($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.