![]()
![]()
![]()
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>模拟QQ分组</title>
<style>
ul,img,ul li{margin:0;padding:0;}
ul li{list-style:none;background:#333;}
a{text-decoration:none;color:#333;}
aside{height:100%;color:#eee;width:260px;}
#list .active{background:url('img/triangle2.png') no-repeat ;cursor:pointer;}
#list ul{display:none;}
#list ul li{line-height:26px;text-indent:80px;font-size:14px;color:#eee;}
/*#list ul:hover{background:#6ff;}*/
.triangle{background:url('img/triangle1.png') no-repeat;cursor:pointer;}
.shopping-bag,
.shop,
.cog{vertical-align:middle;}
.shopping-bag{margin:15px 25px 22px 56px;}
.shop{margin:15px 24px 22px 52px;}
.cog{margin:15px 20px 22px 57px;}
.shopping,
.system{margin:5px 0 0 10px;}
.store{margin:0 0 0 22px ;}
</style>
</head>
<body>
<div>
<aside>
<ul id="list">
<li class="lis">
<span><img src="img/shopping-bag.png" class="shopping-bag">购物中心<b class="shopping triangle" > </b></span>
<ul class="hidden-menu">
<a href="#"><li>概览</li></a>
<a href="#"><li>区域分析</li></a>
<a href="#"><li>客户分析</li></a>
</ul>
</li>
<li class="lis">
<span><img src="img/shop.png" class="shop">零售店<b class="store triangle" > </b></span>
<ul>
<a href="#"><li>运营概览</li></a>
<a href="#"><li>营销活动</li></a>
<a href="#"><li>单店分析</li></a>
<a href="#"><li>客户分析</li></a>
<a href="#"><li>实时分析</li></a>
</ul>
</li>
<li class="lis">
<span><img src="img/cog.png" class="cog">系统设置<b class="system triangle"> </b></span>
<ul>
<a href="#"><li>购物中心设置</li></a>
<a href="#"><li>购物中心图层管理</li></a>
<a href="#"><li>购物中心标注管理</li></a>
<a href="#"><li>购物中心监控点定义</li></a>
<a href="#"><li>购物中心区域管理</li></a>
<a href="#"><li>购物中心平面配置</li></a>
<a href="#"><li>零售店层级设置</li></a>
<a href="#"><li>零售店活动管理</li></a>
<a href="#"><li>用户管理</li></a>
<a href="#"><li>角色管理</li></a>
<a href="#"><li>资源管理</li></a>
</ul>
</li>
</ul>
</aside>
</div>
<script src="external/jquery/jquery.js"></script>
<script>
$('span').click(function(){
if( $(this).next().css('display')=='none'){
/* $('span').next().css('display','none');*/
$('span').removeClass('active');
$(this).next().css('display','block');
$(this).children("b").addClass('active');
}else {
$(this).next().css('display', 'none');
$(this).children("b").removeClass('active');
}
});
$('ul ul li').mouseover(function(){
$('ul ul li').css('background','');
$(this).css('background','red');
});
$('ul ul li').mouseout(function(){
$('ul ul li').css('background','');
});
</script>
</body>
</html>
浙公网安备 33010602011771号