刚刚做了一个菜单导航变亮的效果，共享一下吧！

最新推荐文章于 2015-05-20 09:50:54 发布

转载最新推荐文章于 2015-05-20 09:50:54 发布 · 89 阅读

本文介绍了一种使用JavaScript和CSS实现网页菜单项高亮显示的方法。通过分析当前页面URL来确定哪个菜单项应被激活并突出显示。此外，还展示了如何通过后台获取菜单列表并动态生成菜单项。

ASXC代码：

<script>

    $(function() {

    //菜单变亮

        $(".menubanner>ul>li").find("a[href$='" + location.href.split(window.location.host)[1] + "']")

                              .closest("li").addClass("current");

if (location.href.split(window.location.host)[1] == ""

|| location.href.split(window.location.host)[1] == "/")

            $(".menubanner>ul").find("li:first").addClass("current");

});

</script>

<div class="menubannerLeft">

</div>

<div class="menubanner">

<%

        Entity.Commons.VPredication vp = new Entity.Commons.VPredication();

        Service.IMenusService iMenusService = new Service.MenusService();

        List<Entity.OA.Menu> menu = iMenusService.GetShareMenuList();

%>

    <ul>

        <%foreach (var i in menu)

%>

        <li><a href="<%=i.URL %>">

            <%=i.MenuName%></a></li>

<%}

%>

    </ul>

</div>

<div class="menubannerRight">

</div>

<div style="clear: both">

</div>

CSS代码：

li{ list-style-type:none;}

.menubanner { width: 90%; background: url(http://img.oa.com/img/head-bg.png);

background-repeat: repeat-x; height: 42px; vertical-align: middle;

line-height: 42px; float: left;padding:0px;margin:0px; }

.menubanner li{display:inline;float:left;padding:0px;margin:0px;margin-top:-8px;margin-left:5px;}

.menubanner a{ float:left;padding:0 14px;height:33px;line-height:33px;color:#666;

text-decoration:none;overflow:hidden; vertical-align:middle;}

.menubanner .current { border: 0; background: url("http://img.oa.com/img/menu.gif") no-repeat bottom left;

                       padding-left: 14px; }

.menubanner .current a { border: 0; height:33px;background: url("http://img.oa.com/img/menu.gif") no-repeat bottom right;

padding-right: 21px; }

.menubannerLeft { background: url("http://img.oa.com/img/head-bga.png"); float: left; height: 42px;

                  width: 5%; background-position: left; }

.menubannerRight { background: url("http://img.oa.com/img/head-bgb.png"); float: left; height: 42px;

width: 5%; background-position: right; }