网页侧边栏三级菜单+面包屑导航栏

最新推荐文章于 2023-10-17 17:30:11 发布

爱代码的呆子

最新推荐文章于 2023-10-17 17:30:11 发布

阅读量4.7k

点赞数

分类专栏： web 文章标签： menu

本文链接：https://blog.csdn.net/luzhiweistudy/article/details/70943828

版权

web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<div class="tv-container">

                      <div class="tv-menu"  style="width: 241px; padding-left:10px;background: rgb(255, 255, 255) none repeat scroll 0% 0%;">
                            <div class="menu" >
                                <ul>
                                    <li id="nav_parent_0" ><a class="active" href="#" >我的待办</a>

                                        <ul style="display: block;">
                                            <li id="nav_child_00"><a href="#" >借机管理</a>
                                                <ul>
                                                    <li><a href="#">代签收</a></li>
                                                    <li><a href="#">待同意归还</a></li>
                                                    <li><a href="#">待审核</a></li>
                                                    <li><a href="#">待确认借出</a></li>
                                                </ul>
                                            </li>

                                            <li id="nav_child_01"><a href="#" >需求管理</a>
                                                <ul>
                                                    <li><a href="#">待签收</a></li>
                                                    <li><a href="#">待更新</a></li>
                                                </ul>
                                            </li>
                                            <li id="nav_child_02"><a href="#">IC交叉管理</a>
                                                <ul>
                                                    <li><a href="#">待签收</a></li>
                                                    <li><a href="#">待审核</a></li>
                                                    <li><a href="#">待确认</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li id="nav_parent_1"><a href="#">个人信息</a>
                                        <ul>
                                            <li id="nav_child_10"><a href="#">个人信息</a></li>
                                            <li id="nav_child_11"><a href="#">我的授权</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
</div>
 </div>

2.看tv-nav

<div class="tv-nav">
        <ul id="breadcrumbList" class="breadcrumb">
                                    <li>
                                        <a herf="#">
                                            <span aria-hidden="true"></span>
                                            首页
                                        </a>
                                    </li>
                                    <li class="spliter"></li>
                                    <li id="nav_0">个人信息</li>
                                    <li class="spliter"></li>
                                    <li class="active" id="nav_0_1">个人信息</li>
                                </ul>
                            </div>

3.css

.tv-container {
}

.tv-menu {
    float: left;
    min-height: 520px;
    padding: 0;
    min-width: 160px;
    position: relative;
}

.tv-content {
    background: #fff none repeat scroll 0 0;
    border-left: 2px solid #b1c6d7;
    margin-top: 0;
    padding: 0;
}

.tv-nav {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
    height: 42px;
    line-height: 42px;
    padding-left: 0;
}

.tv-list .show-more {
    background: #fff none repeat scroll 0 0;
    display: none;
    padding: 10px 0;
    text-align: center;
}

.breadcrumb {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    margin-bottom: 0;
    padding: 0 15px;
}

.breadcrumb > li + li::before {
    content: "";
    padding: 0;
}

.breadcrumb li {
    float: left;
    padding-top: 10px;

}

.breadcrumb li a {
    color: #333;
}

.breadcrumb li a:hover {
    color: #008cd6;
}

.breadcrumb li.spliter {
    background: rgba(0, 0, 0, 0) url("../css/images/breadcrumb_navigation.png") no-repeat scroll 5px 13px;
    display: inline-block;
    height: 36px;
    width: 20px;
}

.breadcrumb > .active {
    color: #777777;
}

.mask-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}

/*侧边菜单栏*/
html, body, ul, li {
    margin: 0;
    padding: 0px;
    line-height: 1.2em;
}

br {
    line-height: 8px;
    margin: 0px;
}

h1, h2, ul, li, p {
    margin: 0;
    padding: 0;
}

html, body {
    font-family: georgia, verdana, tahoma, arial, sans-serif;
    font-size: 15px;
    background: #f2f2f2;
}

a {
    color: #1c769a;
    text-decoration: none;
    font-size: 1.1em;
}

a:hover {
    text-decoration: underline;
}

h2 {
    font-size: 1.3em;
    text-align: center;
    color: #414141;
    margin-bottom: 0px;
    padding: 0px;
}

h3 {
    font-size: 0.8em;
    text-align: center;
    color: #8f8f8f;
    margin-top: 3px;
    padding-top: 0px;
}

h3 a {
    color: #747474;
}

/* CONTENT */
#content {
    width: 231px;
    padding: 10px;
    border: solid 1px #dfdfdf;
    background: #fff none repeat scroll 0 0;
    font-size: 15px;
    margin: 2px;
    overflow: hidden;
}

#content h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #535353;
}

#content img {
    background: #f7f7f7;
    border: solid 1px #464646;
    margin: 2px;
}

.menu ul li {
    display: block;
    width: 231px;
    padding-top: 2px;
    padding-left: 4px;
    margin-bottom: 5px;
    background: url(../image/zakladka.png) top left no-repeat;
    list-style: none;
    overflow: visible;
}

.menu ul li a {
    display: block;
    height: 42px;
    margin-top: 1px;
    padding-top: 10px;
    padding-left: 40px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    outline: none;
}

.menu ul li a:hover {
    background: #d9534f;
}

.menu ul li .active {
    background: url(../image/on.png) top right no-repeat;
}

.menu ul li .inactive {
    background: url(../image/off.png) top right no-repeat;
}

.menu ul li ul {
    display: none;
    margin: 5px;
}

.menu ul li ul li ul {
    margin-top: 5px;
    margin-bottom: 5px;
}

.menu ul li ul li {
    display: block;
    background: none;
    font-size: 16px;
    font-weight: bold;
    list-style: circle;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 2px;
    margin-left: 25px;
}

.menu ul li ul li a {
    width: 70%;
    background: #d8e5f3;
    border-radius: 5px;
    font-size: 14px;
    height: 35px;
    color: #0064dd;
    margin: 2px;
}

4.js

 $(document).ready(function (){
        $(".menu ul li").menu();
    });

    (function($) {
        $.fn.menu = function(b) {
            var c,
                item,
                httpAdress;
            b = jQuery.extend({
                    Speed: 220,
                    autostart: 1,
                    autohide: 1
                },
                b);
            c = $(this);
            item = c.children("ul").parent("li").children("a");
            httpAdress = window.location;
            item.addClass("inactive");
            function _item() {
                var a = $(this);
                if (b.autohide) {
                    a.parent().parent().find(".active").parent("li").children("ul").slideUp(b.Speed / 1.2,
                        function() {
                            $(this).parent("li").children("a").removeAttr("class");
                            $(this).parent("li").children("a").attr("class", "inactive")
                        })
                }
                if (a.attr("class") == "inactive") {
                    a.parent("li").children("ul").slideDown(b.Speed,
                        function() {
                            a.removeAttr("class");
                            a.addClass("active")
                        })
                }
                if (a.attr("class") == "active") {
                    a.removeAttr("class");
                    a.addClass("inactive");
                    a.parent("li").children("ul").slideUp(b.Speed)
                }
            }
            item.unbind('click').click(_item);
            if (b.autostart) {
                c.children("a").each(function() {
                    if (this.href == httpAdress) {
                        $(this).parent("li").parent("ul").slideDown(b.Speed,
                            function() {
                                $(this).parent("li").children(".inactive").removeAttr("class");
                                $(this).parent("li").children("a").addClass("active")
                            })
                    }
                })
            }
        }
    })(jQuery);

    $("#nav_parent_0").click(function() {
        $("#nav_0").html("我的待办");
        $("#nav_0_1").html("");
    });
    $("#nav_child_00").click(function() {
        $("#nav_0").html("我的待办");
        $("#nav_0_1").html("借机管理");
        return false;
    });
    $("#nav_child_01").click(function() {
        $("#nav_0").html("我的待办");
        $("#nav_0_1").html("需求管理");
        return false;
    });
    $("#nav_child_02").click(function() {
        $("#nav_0").html("我的待办");
        $("#nav_0_1").html("IC交叉管理");
        event.stopPropagation();
    });
    $("#nav_parent_1").click(function() {
        $("#nav_0").html("个人信息");
        $("#nav_0_1").html("");
    });
    $("#nav_child_10").click(function() {
        $("#nav_0").html("个人信息");
        $("#nav_0_1").html("个人信息");
        event.stopPropagation();
    });
    $("#nav_child_11").click(function() {
        $("#nav_0").html("个人信息");
        $("#nav_0_1").html("流程授权");
        event.stopPropagation();
    });