树菜单
树1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<style>
._HEAD2{width: 200px;height: calc(100% - 100px);float: left;margin-top: 50px;margin-bottom:50px;}
._TREE_DIV{width: 100%;float: left;height:100%;overflow: auto;}
._TREE_DIV ul{float: left;position: relative;margin-left: 10px;width: calc(100% - 10px);}
._TREE_DIV ul>li{width: 100%;float: left;position: relative;padding-left: 10px}
._TREE_DIV ul>li>a{width: 100%;float: left;}
._TREE_DIV ul>li>a>span{width: 20px;height: 30px;line-height: 30px;text-align: center;display: block;float: left;}
._TREE_DIV ul>li>a>span>i{color: #999;font-size: 13px;}
._TREE_DIV ul>li>a>p{float: left;width: calc(100% - 20px);line-height: 30px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
._TREE_DIV ul:before{position: absolute;content: '';display: inline-block;border: 1px dotted #999;top: -17px;left: 0;bottom: 17px;border-width: 0 0 0 1px;}
._TREE_DIV ul>li:before{position: absolute;content: '';width: 20px;height: 1px;border-top: 1px dotted #999;left: 0;top: 14px;}
._TREE_DIV ul>li:last-of-type:after{position: absolute;content: '';display: inline-block;border: 2px solid #FFF;top: 16px;left: 0;bottom: 17px;}
._TREE_DIV ul>li>a:hover *{color: #3493E5;}
._TREE_DIV ul>li.selected>a *{color: #3493E5;}
</style>
</head>
<body>
<div class="_HEAD2">
<div class="_TREE_DIV">
<ul>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>江苏企梦软件技术有限公司</p>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>会计部门</p>
</a>
<ul>
<li class="selected">
<a href="javascript:void(0);">
<span><i></i></span>
<p>A组</p>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>B组</p>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>C组</p>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>D组</p>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>基础部门</p>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>税务部</p>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>A组</p>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>B组</p>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>C组</p>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>D组</p>
</a>
</li>
</ul>
</li>
</ul>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>业务部</p>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>事业部</p>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<p>网络部</p>
</a>
</li>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
树2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<style>
._HEAD2{width: 200px;height: calc(100% - 100px);float: left;margin-top: 50px;margin-bottom:50px;}
._TREE_DIV2{width: 100%;float: left;height:100%;overflow: auto;}
._TREE_DIV2 ul{float: left;position: relative;margin-left: 10px;width: calc(100% - 10px);}
._TREE_DIV2 ul>li{width: 100%;float: left;position: relative;padding-left: 10px}
._TREE_DIV2 ul>li>a{width: 100%;float: left;}
._TREE_DIV2 ul>li>a>span{width: 15px;height: 15px;line-height: 15px;text-align: center;display: block;float: left;margin-top: 7.5px;border: 1px solid #999;margin-left: 5px;margin-right: 5px;position: relative;}
._TREE_DIV2 ul>li>a>span:after{position: absolute;content: '';display: inline-block;width:10px;height:1px;border-top:1px dotted #999;top: 7.5px;}
._TREE_DIV2 ul>li>a>span>i{color: #999;}
._TREE_DIV2 ul>li>a>div{float: left;width: 100%;line-height: 30px;}
._TREE_DIV2 ul>li>a>span ~ div{width: calc(100% - 30px);}
._TREE_DIV2 ul>li>a>div>span{float: left;width: 20px;display: block;line-height: 30px;text-align: center;float: left;}
._TREE_DIV2 ul>li>a>div>p{width: calc(100% - 50px);line-height: 30px;float: left;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
._TREE_DIV2 ul:before{position: absolute;content: '';display: inline-block;border: 1px dotted #999;top: -7px;left: 0;bottom: 9px;border-width: 0 0 0 1px;}
._TREE_DIV2 ul>li:before{position: absolute;content: '';width: 15px;height: 1px;border-top: 1px dotted #999;left: 0;top: 14px;}
._TREE_DIV2 ul>li:last-of-type:after{position: absolute;content: '';display: inline-block;border: 2px solid #FFF;top: 16px;left: 0;bottom: 9px;}
._TREE_DIV2 ul>li>a:hover *{color: #3493E5;}
</style>
</head>
<body>
<div class="_HEAD2">
<div class="_TREE_DIV2">
<ul>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<div>
<div class="_CHECKBOX">
<input class="_CHECKBOX_INPUT" type="checkbox">
<span class="_CHECKBOX_INPUTBG"></span>
</div>
<span><i></i></span>
<p>导出</p>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div>
<div class="_CHECKBOX">
<input class="_CHECKBOX_INPUT" type="checkbox">
<span class="_CHECKBOX_INPUTBG"></span>
</div>
<span><i></i></span>
<p>EXCLE</p>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<div>
<div class="_CHECKBOX">
<input class="_CHECKBOX_INPUT" type="checkbox">
<span class="_CHECKBOX_INPUTBG"></span>
</div>
<span><i></i></span>
<p>同步</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<div>
<div class="_CHECKBOX">
<input class="_CHECKBOX_INPUT" type="checkbox">
<span class="_CHECKBOX_INPUTBG"></span>
</div>
<span><i></i></span>
<p>流程</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<div>
<div class="_CHECKBOX">
<input class="_CHECKBOX_INPUT" type="checkbox">
<span class="_CHECKBOX_INPUTBG"></span>
</div>
<span><i></i></span>
<p>附件</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<div>
<div class="_CHECKBOX">
<input class="_CHECKBOX_INPUT" type="checkbox">
<span class="_CHECKBOX_INPUTBG"></span>
</div>
<span><i></i></span>
<p>删除</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span><i></i></span>
<div>
<div class="_CHECKBOX">
<input class="_CHECKBOX_INPUT" type="checkbox">
<span class="_CHECKBOX_INPUTBG"></span>
</div>
<span><i></i></span>
<p>新增</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号