漂亮的樹形選單,可摺疊,有動畫
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...
<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="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

相關文章

程式語言 最新文章