asp.net + CSS实现动态菜单突出显示当前页面!
2007-11-23 09:59
951 查看
搞了两天的问题终于解决了,网上关于突出显示当前页面的文章有不少,但是基本都是关于实现静态菜单的高亮,讲到动态生成菜单高亮的文章至少我没有找到,在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; '把鼠标样式改为默认的箭头,即不会诱使用户点击连接
}
最后效果图:
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; '把鼠标样式改为默认的箭头,即不会诱使用户点击连接
}
最后效果图:
相关文章推荐
- asp.net实现动态显示当前日期时间——用asp自己封装的AJAX
- asp.net 实现动态显示当前时间(不用javascript不考虑开销)
- asp.net 实现动态显示当前时间(不用javascript不考虑开销)
- asp.net 实现动态显示当前时间(不用javascript不考虑开销)
- asp.net中实现页面上动态显示系统时间
- ASP.NET通过使页面动态加载不同CSS实现多界面
- asp.net cshtml页面使用Razor后台代码动态产生页面——函数实现
- 在asp.net中如何用LinkBtutton按钮实现安全退出,并保存当前页面数据与数据库中
- ASP.NET实现动态页面标题
- asp.net使用javascript实现不刷新页面获取当前时间
- Highcharts结合Asp.net实现动态数据股票式图形显示实例
- 转 ASP.NET中不定级动态菜单的实现
- asp.net后台动态添加JS文件和css文件的引用实现方法
- 针对这一段时间ASP.NET版中比较集中突出的问题,我写了一个完整的页面,包含显示/修改/删除/添加/排序/合并/写文件/显示图片或文档,有详细代码注释
- SolpartMenu的使用:(二)、在ASP.NET页面中使用SolpartMenu控件之动态的加载数据库中的数据来生成菜单
- 如何在asp.net页面上放置的控件上实现左右键菜单,同时对之操作(1)
- ASP.NET动态加载不同CSS,实现切换皮肤效果
- ASP.NET中不定级动态菜单的实现
- ASP.NET MVC Bootstrap模板选中菜单高亮显示当前项方法