首页 > 代码库 > 漂亮的树形菜单,可折叠,有动画

漂亮的树形菜单,可折叠,有动画

<div class="lmenu">
	<ul>
		<li aid="26">
			<span> <em class="icoopen"></em>
				易语言专题学习
			</span>
			<ul style="display: none;">
				<li aid="27"> <em class="iconleaf"></em>
					网页填表专题
				</li>
				<li aid="28">
					<em class="iconleaf"></em>
					网页封包专题
				</li>
				<li aid="29">
					<em class="iconleaf"></em>
					API一日一练专题
				</li>
			</ul>
		</li>
		<li aid="1">
			<span>
				<em class="icoclose"></em>
				易语言工具箱
			</span>
			<ul style="display: block;">
				<li aid="4">
					<em class="iconleaf"></em>
					易语言帮助文档
				</li>
				<li aid="2">
					<em class="iconleaf"></em>
					易语言支持库
				</li>
				<li aid="8">
					<span>
						<em class="icoclose2"></em>
						编程辅助
					</span>
					<ul>
						<li aid="10">
							<em class="iconleaf2"></em>
							易语言黑月
						</li>
						<li aid="3">
							<em class="iconleaf2"></em>
							易语言皮肤
						</li>
						<li aid="9">
							<em class="iconleaf2"></em>
							易语言编程工具
						</li>
					</ul>
				</li>
				<li aid="5">
					<span>
						<em class="icoclose2"></em>
						易语言模块
					</span>
					<ul>
						<li aid="7">
							<em class="iconleaf2"></em>
							易语言模块源码
						</li>
						<li aid="6">
							<em class="iconleaf2"></em>
							易语言成品模块
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li aid="11">
			<span>
				<em class="icoclose"></em>
				易语言源码
			</span>
			<ul>
				<li aid="17">
					<span>
						<em class="icoclose2"></em>
						易语言行业源码
					</span>
					<ul>
						<li aid="25">
							<em class="iconleaf2"></em>
							网络相关
						</li>
						<li aid="23">
							<em class="iconleaf2"></em>
							模块控件
						</li>
						<li aid="22">
							<em class="iconleaf2"></em>
							数据库类
						</li>
						<li aid="21">
							<em class="iconleaf2"></em>
							游戏娱乐
						</li>
						<li aid="20">
							<em class="iconleaf2"></em>
							多媒体类
						</li>
						<li aid="19">
							<em class="iconleaf2"></em>
							图形图像
						</li>
						<li aid="18">
							<em class="iconleaf2"></em>
							系统工具
						</li>
						<li aid="24">
							<em class="iconleaf2"></em>
							行业软件
						</li>
					</ul>
				</li>
				<li aid="12">
					<span>
						<em class="icoclose2"></em>
						易语言学习例程
					</span>
					<ul>
						<li aid="15">
							<em class="iconleaf2"></em>
							进阶例程
						</li>
						<li aid="16">
							<em class="iconleaf2"></em>
							高级例程
						</li>
						<li aid="14">
							<em class="iconleaf2"></em>
							初级例程
						</li>
						<li aid="13">
							<em class="iconleaf2"></em>
							入门例程
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>



<style>
*{
	margin: 0;
	padding: 0;
}
.icoopen , .icoopen2 , .icoclose , .icoclose2 , .iconleaf , .iconleaf2 ,.lmenu ul li span ,.search-side button{background: url("doc.png") no-repeat 0 0;width: 9px;height: 9px;top: 9px;}
.lmenu li{list-style: none;}
.lmenu em {display: block;position: absolute;cursor: pointer;}
.icoopen{left: 28px;background-position: 0 -39px;}
.icoopen2{left: 42px;background-position: -46px -88px;}
.icoclose{left: 28px;background-position: -45px -39px;}
.icoclose2{left: 42px;background-position: 0 -88px;}

.iconleaf , .iconleaf2{width: 3px;height: 5px;background-position: -87px -41px;}

.iconleaf {left: 47px;top: 11px;}
.iconleaf2 {left: 72px;top: 10px;}

.search-side{
	width: 250px;
	border-radius: 5px;
	position: relative;
	background-color: #FFFFFF;
	border: 1px solid #ddd;
	height: 36px;
	line-height: 36px;
}
.search-side button{
	background-position: 0 0;
	border: 0 none;
	cursor: pointer;
	display: block;
	height: 16px;
	width: 16px;
	position: relative;
	left: 11px;
}
.search-box input{
	position: absolute;
	top: 11px;
	background-color: transparent;
	border: medium none;
	color: #AFB0B0;
	height: 16px;
	margin-left: 37px;
	outline: medium none;
	width: 200px;
}


.lmenu{
	width: 250px;
	height: auto;
	overflow: hidden;
	font-family: "宋体",Tahoma, Helvetica, "Microsoft Yahei", "微软雅黑", Arial, STHeiti;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.lmenu ul li{
	position: relative;
	cursor: pointer;
}
.lmenu ul li ul{
	max-height: 350px;
	overflow: auto;
}
.lmenu ul li ul li ul{
	height: auto;
}
.lmenu ul li span{
	display: block;
	width: 100%;
	height: 28px;
	line-height: 28px;
	text-indent: 3em;
	/*font-weight: bolder;*/
	font-size: 14px;
	color: #0E3E5E;
	border-bottom: 1px solid #D7D7D7;
	background-position: -46px 0;
}
.lmenu ul li ul li , .lmenu ul li ul li span{
	/*background-color: #F7F8F8;*/
	background-color: #FFFFFF;
	color: #333;
	text-indent: 5em;
	font-size: 13px;
	height: auto;
	line-height: 28px;

}
.lmenu ul li ul li span{
	background:none;

}
.lmenu ul li ul li ul li{
	border:none;
	text-indent: 7em;
	font-size: 12px;
	font-weight: normal;
	height: 24px;
	line-height: 24px;
}
</style>
<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.9.1.js"></script>>


遇到什么不懂的可以找我QQ啊 496928838