Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)delv
published in(发表于) 2014/1/24 9:02:31
ASP.NET,+,CSS实现动态菜单突出显示当前页面_[Asp.Net教程]

ASP.NET + CSS实现动态菜单突出显示当前页面_[Asp.Net教程]

搞了两天的问题终于解决了,网上关于突出显示当前页面的文章有不少,但是基本都是关于实现静态菜单的高亮,讲到动态生成菜单高亮的文章至少我没有找到,在csdn上问了两天都没有答案,最后在一位朋友的回答中找到思路,先利用一个函数判断菜单是否是正在浏览的当前页,然后付给li一个id,利用css层叠id大于class的关系,把这个id定义成高亮样式。

aspx文件代码


引用内容



后台代码:vb版本

引用内容


Public Function getCss(ByVal Url As Object) As String
Dim curPageName As String = HttpContext.Current.Request.Url.Segments(HttpContext.Current.Request.Url.Segments.Length - 1)
If Url.ToString.ToLower = curPageName.ToLower Then
Return "id='activer'"
Else
Return Nothing
End If
End Function

C#版本

引用内容


public string getCss(object Url)
{
string curPageName = HttpContext.Current.Request.Url.Segments(HttpContext.Current.Request.Url.Segments.Length - 1);
if (Url.ToString.ToLower == curPageName.ToLower) {
return "id='activer'";
} else {
return null;
}
}

CSS样式

引用内容 引用内容


.navigation {
background: url(../images/navigation-bg.png);
height: 38px;
width :1003px;
overflow: hidden;
line-height: 2em;
}

.navigation ul {
list-style: none;
margin: 0 auto;
padding: 0;
text-align: left;
width: 970px;
}

.navigation ul li {
background: none;
display: inline;
float: left;
list-style-type: none;
padding: 0;
}

.navigation ul li a {
color: #666;
display: block;
height: 25px;
overflow: hidden;
padding: 5px 15px 0 15px;
text-decoration: none !important;
}

.navigation ul li a:hover {
color: #fff !important;
}
#activer a{ '这个就是高亮菜单的样式,这里我用了背景图片
background: url(../images/navigation-active.gif);
color: #a21 !important;
font-weight: bold;
cursor:default; '把鼠标样式改为默认的箭头,即不会诱使用户点击连接
}


最后效果图


来源:http://www.morock.net/blog/article.asp?id=78






If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759