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

1.看menu

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