-
Notifications
You must be signed in to change notification settings - Fork 34
/
index.html
159 lines (153 loc) · 6.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery网站多级侧边栏导航菜单代码 - 站长素材</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="dist/sidebar-menu.css">
<style type="text/css">
.main-sidebar{
position: absolute;
top: 0;
left: 0;
height: 100%;
min-height: 100%;
width: 230px;
z-index: 810;
background-color: #222d32;
}
.right_content{
position: absolute;
left: 230px;
}
</style>
</head>
<body>
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu">
<li class="header">DEMO</li>
<li class="treeview">
<a _href="#">
<i class="fa fa-dashboard"></i> <span>单页面</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a _href="ecommerce.html" target="ecommerce"><i class="fa fa-circle-o"></i> 电商网页</a></li>
<li><a _href="ecommerce1.html" target="ecommerce1"><i class="fa fa-circle-o"></i> 电商网站2</a></li>
<li><a _href="ecommerce2.html" target="ecommerce2"><i class="fa fa-circle-o"></i> 电商网站3</a></li>
<li><a _href="buy.html" target="buy"><i class="fa fa-circle-o"></i> 电商网站4</a></li>
</ul>
</li>
<!-- <li class="treeview">
<a _href="css.html">
<i class="fa fa-files-o"></i>
<span>css效果</span>
<!–<span class="label label-primary pull-right">4</span>–>
</a>
</li>-->
<li class="treeview">
<a _href="#">
<i class="fa fa-pie-chart"></i>
<span>JS DEMO</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a _href="scroll.html" target="scroll"><i class="fa fa-circle-o"></i> 滚动条控制其他元素</a></li>
<li><a _href="sort.html" target="sort"><i class="fa fa-circle-o"></i> 图片排序与随机</a></li>
<li><a _href="dividePage.html" target="dividePage"><i class="fa fa-circle-o"></i> 分页demo</a></li>
<li><a _href="tab-control.html" target="tab-control"><i class="fa fa-circle-o"></i> 选项卡里套选项卡</a></li>
<li><a _href="magnifying.html" target="magnifying"><i class="fa fa-circle-o"></i> 放大镜效果</a></li>
</ul>
</li>
<li class="treeview">
<a _href="#">
<i class="fa fa-laptop"></i>
<span>JS运动</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a _href="click-img.html" target="click-img"><i class="fa fa-circle-o"></i> 点击图片渐变</a></li>
<li><a _href="disappear.html" target="disappear"><i class="fa fa-circle-o"></i> 点击图片消失</a></li>
<li><a _href="img-roll.html" target="img-roll"><i class="fa fa-circle-o"></i> 图片滚动</a></li>
<li><a _href="fade-out.html" target="fade-out"><i class="fa fa-circle-o"></i> 图片轮播渐隐</a></li>
<li><a _href="carousel.html" target="carousel"><i class="fa fa-circle-o"></i> 图片轮播</a></li>
<li><a _href="img-shake.html" target="img-shake"><i class="fa fa-circle-o"></i> 图片抖动</a></li>
<li><a _href="sort-roll.html" target="sort-roll"><i class="fa fa-circle-o"></i> 图片随机滚动</a></li>
<li><a _href="automatic.html" target="automatic"><i class="fa fa-circle-o"></i> 图片自动切换</a></li>
<li><a _href="drag.html" target="drag"><i class="fa fa-circle-o"></i> 图片拖拽效果</a></li>
<li><a _href="phone-screen.html" target="phone-screen"><i class="fa fa-circle-o"></i> 手机滑屏效果</a></li>
<li><a _href="required-img.html" target="required-img"><i class="fa fa-circle-o"></i> 按需加载图片</a></li>
<li><a _href="menu-fluoroscopy.html" target="menu-fluoroscopy"><i class="fa fa-circle-o"></i> 菜单透视</a></li>
<li><a _href="photo-wall.html" target="photo-wall"><i class="fa fa-circle-o"></i> 照片墙</a></li>
</ul>
</li>
<li class="treeview">
<a _href="#">
<i class="fa fa-edit"></i> <span>CSS3 DEMO</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a _href="overturn.html" target="overturn"><i class="fa fa-circle-o"></i> 翻转的文字</a></li>
<li><a _href="hover.html" target="hover"><i class="fa fa-circle-o"></i> 鼠标移入3D效果</a></li>
<li><a _href="magnify.html" target="magnify"><i class="fa fa-circle-o"></i>苹果电脑放大效果</a></li>
<li><a _href="iphone-animation.html" target="iphone-animation"><i class="fa fa-circle-o"></i>iphone开机动画</a></li>
<li><a _href="unfold-menu.html" target="unfold-menu"><i class="fa fa-circle-o"></i>菜单展开效果</a></li>
<li><a _href="clock.html" target="clock"><i class="fa fa-circle-o"></i>画时钟</a></li>
</ul>
</li>
<li class="treeview">
<a _href="#">
<i class="fa fa-table"></i> <span>HTML5</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a _href="canvas-circle1.html" target="canvas-circle1"><i class="fa fa-circle-o"></i> canvas绘制上下移动的圆</a></li>
<li><a _href="canvas-circle2.html" target="canvas-circle2"><i class="fa fa-circle-o"></i> canvas绘制随机移动的圆</a></li>
<li><a _href="canvas-clock.html" target="canvas-clock"><i class="fa fa-circle-o"></i> canvas绘制时钟</a></li>
</ul>
</li>
<li class="treeview">
<a _href="#">
<i class="fa fa-folder"></i> <span>SVG</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a _href="3dmoxing.html" target="3dmoxing"><i class="fa fa-circle-o"></i> 3D模型</a></li>
</ul>
</li>
<li class="treeview">
<a _href="#">
<i class="fa fa-folder"></i> <span>移动端</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="indexPhone.html"><i class="fa fa-circle-o"></i> 微信旅游网页</a></li>
</ul>
</li>
</ul>
</section>
</aside>
<iframe class="right_content" src="ecommerce.html" name="ecommerce" frameborder="1" height="700px">
<div>你盛开的积分快结束了宽度盛开的积分舒服的水电费圣诞节覅</div>
</iframe>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="./dist/sidebar-menu.js"></script>
<script>
$.sidebarMenu($('.sidebar-menu'));
console.log($(document).height());
$(".right_content").css({
"height": $(document).height(),
"width" : $(document).width()-230
});
$(".treeview-menu li").on("click",function(){
$(".treeview-menu li").find("a").css("color","#8aa4af");
$(this).find("a").css("color","#fff");
$(".right_content").attr("src",$(this).find("a").attr("_href"));
$(".right_content").attr("name",$(this).find("a").attr("target"));
})
</script>
</body>
</html>