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