<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>三级菜单</title>
<link href="style2.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
var number=2;
function LMYC(obj) {
var lbmc
var treePic
for (i=1;i<=number;i++) {
lbmc = document.getElementById('LM' + i);
treePic = document.getElementById('treePic'+i);
treePic.className = 'lmenub';
lbmc.style.display = 'none';
}
}
function ShowFLT(i) {
lbmc = document.getElementById('LM' + i);
treePic = document.getElementById('treePic' + i)
if (lbmc.style.display == 'none') {
LMYC();
treePic.className = 'lmenua';
lbmc.style.display = '';
}
else {
treePic.className = 'lmenub';
lbmc.style.display = 'none';
}
}
var n=4;
function LMYCB(obj) {
var lbmcb
var treePicb
for (i=1;i<=n;i++) {
lbmcb = document.getElementById('LMb' + i);
treePicb = document.getElementById('treePicb'+i);
treePicb.className = 'lmenud';
lbmcb.style.display = 'none';
}
}
function ShowFLTb(i) {
lbmcb = document.getElementById('LMb' + i);
treePicb = document.getElementById('treePicb' + i)
if (lbmcb.style.display == 'none') {
LMYCB();
treePicb.className = 'lmenuc';
lbmcb.style.display = '';
}
else {
treePicb.className = 'lmenud';
lbmcb.style.display = 'none';
}
}
function checkTdBg(obj){
var obj_td = document.getElementsByTagName('span');
for( var int_i = 0 ; int_i < obj_td.length ; int_i ++ ){
if( obj_td[int_i] == obj ){
obj_td[int_i].className = 'active';
}
else{
obj_td[int_i].className = '';
}
}
}
</script>
<style>
a{color:#333; text-decoration:none;}
a:hover{color:#FF0033;}
body{font-family: "宋体";font-size:12px; margin:0; padding:0;}
ul{list-style-type:none; margin:0; padding:0;}
li{margin:0; padding:0;}
.leftmenu{background:#EEF2FB;height:auto;margin:0 auto; width:182px;border:1px solid #73C2FF;}
.lmenub{background:url(http://bbs.blueidea.com/attachment.php?aid=117261&k=d6565eadc3b2be5a78f560c9e7f49581&t=1240970983&noupdate=yes) no-repeat left;height:25px; line-height:25px;color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px; cursor:pointer;}
.lmenua{background:url(http://bbs.blueidea.com/attachment.php?aid=117262&k=9981f86f0f8e995aa7ff79bc5586bd81&t=1240970983&noupdate=yes) no-repeat;17px;height:25px; line-height:25px;color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px; cursor:pointer;}
.lmenuc{border-bottom:1px solid #A1B7CE; background:url(http://bbs.blueidea.com/attachment.php?aid=117260&k=bd3321ea3c1c02ff5570951500e7dc5e&t=1240970983&noupdate=yes) repeat-x left;font-size:12px;height:22px;line-height:22px;cursor:pointer; text-indent:20px; color:#222; font-weight:700;}
.lmenud{font-size:12px;height:22px;line-height:22px;background:#E5F5FF;text-indent:10px;border-top: 1px solid #fff;border-bottom: 1px solid #A9DAFF; font-weight:normal;cursor:pointer; text-indent:20px;}
.pclist{height:200px; overflow-y:scroll; background:#fff; width:164px; padding:5px 2px 5px 17px;}
.pclist li{background:url(http://bbs.blueidea.com/attachment.php?aid=117259&k=1a1e02d41c7c0fa55788ba52cdf7e05b&t=1240970983&noupdate=yes) no-repeat 0 5px;height:22px; line-height:22px; font-size:12px; padding-left:17px;}
.pclist .active{background:#FFFFCC; height:15px; border:1px solid #CEB70D; padding:1px 3px;}
</style>
</head>
<body style="background:#EEF2FB;">
<div class="leftmenu">
<div class="lmenua" id="treePic1" onClick="javascript:ShowFLT(1)">一级菜单A</div>
<div id="LM1" >
<div class="lmenuc" id="treePicb1" onClick="javascript:ShowFLTb(1)">文管产品</div>
<div id="LMb1" class="pclist ">
<ul>
<li><span οnclick='checkTdBg(this);' class="active"><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
<li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
</ul>
</div>
<div class="lmenud" id="treePicb2" onClick="javascript:ShowFLTb(2)">未分组</div>
<div id="LMb2" class="pclist" style="display:none;">
<ul>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
</ul>
</div>
</div>
<div class="lmenub" id="treePic2" onClick="javascript:ShowFLT(2)">一级菜单B</div>
<div id="LM2" style="display:none;">
<div class="lmenud" id="treePicb3" onClick="javascript:ShowFLTb(3)">桌面文具</div>
<div id="LMb3" class="pclist" style="display:none;">
<ul>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
</ul>
</div>
<div class="lmenud" id="treePicb4" onClick="javascript:ShowFLTb(4)">文管产品</div>
<div id="LMb4" class="pclist" style="display:none;">
<ul>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
<li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
仿QQ菜单----三级菜单
最新推荐文章于 2021-09-10 11:46:14 发布