因为自己和对象的钱总是不知道花在哪里,支付方式又是微信,又是支付宝很难去统计钱到底花在了哪里。
于是做了一个消费通统计分析的一个平台,又要自己整模板了,难受!在网上找了很久,终于是让我找到了一个比较好看的样式
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.bootstrap.com/bootstrap/css/bootstrap.3.3.4.min.css">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/jquery-kq-nav-left.css">
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<ul class="nav-left-container">
<li>
<!-- li的class为active表示点击选中 -->
<a href="#">
<!-- aria-hidden字符串。可选值为true和false,true表示元素隐藏(不可见),false表示元素可见。 -->
<span class="glyphicon glyphicon-home f12" aria-hidden="true"></span>
<span>主页</span>
<span class="glyphicon glyphicon-menu-right f12 fr" aria-hidden="true"></span>
</a>
<ul class="nav-left-container-small">
<!-- aria-expanded表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值:true表示元素是展开的;false表示元素不是展开的。 -->
<li>
<a class="J_menuItem" href="#">百度ECharts</a>
</li>
<li>
<a class="J_menuItem" href="#">Flot</a>
</li>
<li>
<a class="J_menuItem" href="#">Morris.js</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-calendar f12" aria-hidden="true"></span>
<span>表格</span>
<span class="glyphicon glyphicon-menu-right f12 fr" aria-hidden="true"></span>
</a>
<ul class="nav-left-container-small">
<li>
<a class="J_menuItem" href="#">Rickshaw</a>
</li>
<li>
<a class="J_menuItem" href="#">Peity</a>
</li>
<li>
<a class="J_menuItem" href="#">Sparkline</a>
</li>
<li>
<a class="J_menuItem" href="#">图表组合</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-edit f12" aria-hidden="true"></span>
<span>表单</span>
<span class="glyphicon glyphicon-menu-right f12 fr" aria-hidden="true"></span>
</a>
<ul class="nav-left-container-small">
<li>
<a class="J_menuItem" href="#">Rickshaw</a>
</li>
<li>
<a class="J_menuItem" href="#">图表组合</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-duplicate f12" aria-hidden="true"></span>
<span>页面</span>
<span class="glyphicon glyphicon-menu-right f12 fr" aria-hidden="true"></span>
</a>
<ul class="nav-left-container-small">
<li>
<a class="J_menuItem" href="#">图表组合</a>
</li>
<li>
<a class="J_menuItem" href="#">Sparkline</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
<span>UI元素</span>
<span class="glyphicon glyphicon-menu-right f12 fr" aria-hidden="true"></span>
</a>
</li>
</ul>
<script>
$('.nav-left-container').on('click', 'li', function () {
$(this).find('.glyphicon-menu-right').removeClass('glyphicon-menu-right').addClass('glyphicon-menu-down');
$(this).addClass('active').children('.nav-left-container-small').slideDown()
$(this).siblings().removeClass('active').children('.nav-left-container-small').slideUp()
$(this).siblings().find('.glyphicon-menu-down').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right ');
})
</script>
</body>
</html>
jquery-kq-nav-left css代码:
.nav-left-container {
background-color: #1c2b36;
position: fixed;
left: 0;
top: 0;
width: 220px;
height: 100%;
}
.nav-left-container li a {
font-size: 14px;
box-sizing: border-box;
cursor: pointer;
position: relative;
font-weight: 600;
padding: 15px 20px 15px 25px;
display: block;
color: #869fb1;
}
.nav-left-container .active {
border-left: 4px solid #19a9d5;
}
.nav-left-container li:hover {
background-color: #131e26;
}
.nav-left-container .active>a {
color: #ffffff;
}
.nav-left-container-small li a {
font-size: 12px;
padding: 7px 15px 7px 52px;
}
.nav-left-container-small {
display: none;
}
/* .active .nav-left-container-small {
display: block;
} */
base css代码:
/*(1)清除默认样式*/
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img,
input {
margin: 0;
padding: 0;
}
fieldset,
img,
input,
button {
border: 0 none;
padding: 0;
margin: 0;
outline-style: none;
}
/*去掉input等聚焦时的蓝色边框*/
ul,
li,
ol {
list-style: none;
}
select,
input {
vertical-align: middle;
}
/*select, input, textarea { font-size:12px; margin:0; }*/
textarea {
resize: none;
}
/*防止拖动*/
img {
border: 0;
vertical-align: middle;
}
a,
a:hover,
a:link,
a:active,
a:visited {
text-decoration: none;
color: black;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
font-size: 1em;
}
/*设置h标签的大小,设置跟父亲一样大的字体font-size:100%;*/
s,
i,
em {
font-style: normal;
text-decoration: none;
}
.fl {
float: left;
}
/*只要元素需要右浮动就给元素添加一个class名为fr */
.fr {
float: right;
}
.ac {
text-align: center;
}
.f12 {
font-size: 12px;
}
.f14 {
font-size: 14px;
}
.f16 {
font-size: 16px;
}
ul,
li,
div,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p {
box-sizing: border-box;
}
其中引入了bootstrap的css和jquery的js
但是我还是觉得不够华丽,于是我就在此基础上做了些修改变成了这样:
本来想要分享源代码连接的,但是不知道为什么百度网盘老是检测到包含敏感信息,所以大家自己动手,丰衣足食吧!哈哈哈