ASP.NET + CSS实现动态菜单突出显示当前页面

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

aspx文件代码：

引用内容

<div class="navigation">
<ul>
<asp:Repeater ID="Menu" runat="server">
<ItemTemplate >
<li <%#getCss(DataBinder.Eval(Container,"DataItem.Url"))%>><a href ='<%#DataBinder.Eval(Container,"DataItem.Url")%>'> <%#DataBinder.Eval(Container,"DataItem.ClassName")%></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>

后台代码：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