需要引入:
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery-1.11.3.js"></script>
/*main.css*/
.main-container {
position: relative;
}
.left_list {
border: 1px solid #3b3b1f;
position: fixed;
top: 60px;
overflow: auto;
z-index: 1;
width: 220px !important;
height: 94% !important;
}
.l_top_nav {
background: #0a9dc7;
height: 42px;
line-height: 46px;
padding-left: 20px;
color: #fff;
font-size: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
/*左侧导航区*/
.main-container {
position: relative;
}
.left_list {
border: 1px solid #3b3b1f;
position: fixed;
top: 60px;
overflow: auto;
z-index: 1;
width: 220px !important;
height: 94% !important;
}
.l_top_nav {
background: #0a9dc7;
height: 42px;
line-height: 46px;
padding-left: 20px;
color: #fff;
font-size: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
/*ul一级导航*/
.nav_list {
width: 220px;
background: #0aaedb;
cursor: pointer;
}
ul.nav_list > li > a {
display: block;
padding: 0 16px 0 10px;
hieght: 40px;
line-height: 40px;
}
ul.nav_list > li > a > span {
display: inline-block;
width: 30px;
position: relative;
top: 1px;
}
ul.nav_list > li > a > span.glyphicon-chevron-down {
position: absolute;
left: 166px;
top: 14px;
width: 30px;
}
.nav_list > li > ul.menu {
/*padding: 5px 0;*/
border-top: 1px solid rgba(0, 0, 0, 0.15);
background: rgba(10, 158, 203, 0.42);
font-size: 13px;
}
/*li二级导航*/
.nav_list > li > ul.menu > li {
position: relative;
top: 0;
}
.active {
background: #0a79a0;
}
.nav_list > li > ul.menu > li > a {
padding: 12px 0 9px 37px;
display: block;
position: relative;
top: 0px;
height: 40px;
}
.nav_list > li > ul.menu > li > a > i {
font-size: 10px;
position: absolute;
left: 15px;
top: 12px;
}
.icon-double-angle-right:before {
content: ">";
}
.page-content {
padding: 48px 6px 36px 212px;
}
/*右侧显示内容区*/.page_top{ position: relative; top:61px; left:220px; padding: 8px 20px;}
<!--main.html-->
<div class="main-container" id="main-container">
<div class="left_list" id="left_list">
<div class="l_top_nav">
<span>导航菜单</span>
</div>
<ul class="nav_list nav " id="leftList">
<li>
<a href="#">
<span class="glyphicon glyphicon-user"></span>
用户管理
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="menu list-unstyled dplay">
<li class="active">
<a href="javascript:a()"><i class="icon-double-angle-right"></i>用户管理</a>
</li>
<li>
<a href="javascript:a()"><i class="icon-double-angle-right"></i>角色管理</a>
</li>
<li>
<a href="javascript:a()"><i class="icon-double-angle-right"></i>菜单管理</a>
</li>
</ul>
</li>
<li>
<a>
<span class="glyphicon glyphicon-comment"></span>
客户信息
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="menu list-unstyled hide">
<li>
<a href="javascript:a()"><i class="icon-double-angle-right"></i>客户消息</a>
</li>
<li>
<a href="javascript:a()"><i class="icon-double-angle-right"></i>我的消息</a></li>
<li>
<a href="javascript:a()"><i class="icon-double-angle-right"></i>广告代理关系</a></li>
</ul>
</li>
</ul>
</div>
<!--右侧显示内容区-->
<div class="page-content"></div>
</div>
//main.js
//ajax
function a() {
$.ajax({
url: "url.html", //要请求的页面
global: false,
type: "get",
dataType: "html", //请求类型
async: false, //是否为异步请求
success: function (msg) { //msg得到的数据(这里得到的是整个html代码)
// alert(msg);
$('.page-content').html(msg);
}
})
};
//左侧导航
$('.nav>li>a').bind('click', function () {
if ($(this).next('ul').hasClass('dplay')) {
$(this).parent('li').removeClass('hideli');
$(this).next('ul').removeClass('dplay').addClass('hide').slideUp();
}else{
$(this).parent('li').siblings().children(":last-child").removeClass('dplay').addClass('hide');
$(this).parent('li').addClass('hideli');
$(this).parent('li').siblings().removeClass('hideli');
$(this).next('ul').removeClass('hide').addClass('dplay').slideDown();
}
});
$('.menu>li').bind('mouseenter',function () {
if($(this).hasClass('active')){
}else{
$(this).addClass('active');
$(this).siblings('li').removeClass('active');
}
});
效果: