美丽的树形菜单，可折叠，有动画
Posted slgkaifa
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了美丽的树形菜单，可折叠，有动画相关的知识，希望对你有一定的参考价值。
<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>
0基础例程
</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="jquery-1.9.1.js"></script>
<script>
$(function() {
loadMenu(function (id){
window.location= ‘/index.php/index/baoku‘ + ‘/id/‘ + id + ‘.html‘;
});
$(‘li[aid=]‘).css(‘background‘,"#F5F5F5");
});
/*传入一个函数參数为 id 即li上的属性 aid*/
function loadMenu (fun_clickAction) {
/*事件回调函数*/
clickAction = fun_clickAction;
/*一级菜单的样式*/
$(".lmenu > ul > li > span").prepend(‘<em class="icoclose"></em>‘);
/*二级菜单的样式*/
$(".lmenu > ul > li > ul > li").each(function(){
/*检查是否有节点*/
span = $(this).find("span");
if ( span.length ){
//有节点的话
span.prepend(‘<em class="icoclose2"></em>‘);
}else{
//无节点的话,绑定事件
$(this).prepend(‘<em class="iconleaf"></em>‘)
.click(function(){
clickAction($(this).attr(‘aid‘));
});
}
});
/*三级菜单的样式*/
$(".lmenu > ul > li > ul > li > ul > li")
.prepend(‘<em class="iconleaf2"></em>‘)
.click(function(){
clickAction($(this).attr(‘aid‘));
});
$(".lmenu ul li span").click(function(){
var ye = $(this).find(‘em‘);
classNama = ye.attr("class");
if( classNama == ‘icoclose‘){ye.attr(‘class‘,‘icoopen‘);}
else if( classNama == ‘icoopen‘ ){ye.attr(‘class‘,‘icoclose‘);}
else if( classNama == ‘icoclose2‘){ye.attr(‘class‘,‘icoopen2‘);}
else if( classNama == ‘icoopen2‘ ){ye.attr(‘class‘,‘icoclose2‘);}
$(this).siblings("ul").slideToggle("normal","swing");
});
}
</script>
遇到什么不懂的能够找我QQ啊 496928838
以上是关于美丽的树形菜单，可折叠，有动画的主要内容，如果未能解决你的问题，请参考以下文章