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;     '把鼠标样式改为默认的箭头，即不会诱使用户点击连接  
}

最后效果图：