变色的导航

简介:

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; }

本文转自博客园张占岭(仓储大叔)的博客,原文链接:变色的导航,如需转载请自行联系原博主。

目录
相关文章
|
3月前
|
前端开发
导航条下拉菜单的实现及思路
本文介绍了导航条下拉菜单的实现方法和思路,包括HTML结构的搭建和CSS样式的编写,通过使用hover伪类来控制下拉菜单的显示与隐藏。
导航条下拉菜单的实现及思路
|
前端开发
前端——背景图片显示以及悬浮状态下变色的情况
前端——背景图片显示以及悬浮状态下变色的情况
|
7月前
|
前端开发 JavaScript
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
423 0
|
前端开发 开发者 容器
吸顶导航 |学习笔记
快速学习 吸顶导航
139 0
半透明菜单导航
在线演示 本地下载
815 0
侧边自定义滚动条
在线演示 本地下载
960 0
垂直手风琴折叠菜单
在线演示 本地下载
807 0
鼠标拖拽翻页效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84192737 ...
998 0