首页 > 代码库 > JS+CSS打造仿QQ面板的三级折叠下拉菜单
JS+CSS打造仿QQ面板的三级折叠下拉菜单
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS+CSS打造仿QQ面板的三级折叠下拉菜单-石家庄地毯</title><style type="text/css">*{ margin:0px; padding:0px; border:0px; }body{ font-size:12px; color:#333;text-align:center;}.mbox{background:#73C2FF; width:184px; height:auto;}.mbox .m1{background:url(/images/20110420/m1.gif) no-repeat left; width:182px; height:25px; line-height:25px; color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px;}.mbox .m2{background:url(/images/20110420/m2.gif) no-repeat left; width:182px; height:25px; line-height:25px; color:#4B6486; font-size:14px; font-weight:700; text-align:left;text-indent:19px;}.mbox .Test5study{ background:#fff;}.mbox .Test5study{text-align:left;width:182px;height:auto;overflow: hidden;}.mbox .Test5study h2{font-size:14px;height:22px;line-height:22px;background:#E5F5FF;text-indent:10px;position:relative;border-top: 1px solid #fff;border-bottom: 1px solid #A9DAFF; font-weight:normal;cursor:pointer;}.mbox .Test5study h2 span{font-weight: normal;position:absolute;top:0;right:6px;}.mbox .Test5study li{border-bottom:dashed 1px #eee; line-height:22px;}.mbox .Test5study {border-bottom:solid 1px #A9DAFF;}.mbox .TxtList{ list-style:disc url(); padding:10px 0 10px 10px; height:200px; overflow-y:scroll;}</style><script language="javascript" id="clientEventHandlersJS"><!--var number=2;function LMYC() {var lbmc;//var treePic;for (i=1;i<=number;i++) {lbmc = eval(‘LM‘ + i);//treePic = eval(‘treePic‘+i);//treePic.src = http://www.mamicode.com/‘images/file.gif‘;lbmc.style.display = ‘none‘;}}function ShowFLT(i) {lbmc = eval(‘LM‘ + i);//treePic = eval(‘treePic‘ + i)if (lbmc.style.display == ‘none‘) {LMYC();//treePic.src = http://www.mamicode.com/‘images/nofile.gif‘;lbmc.style.display = ‘‘;}else {//treePic.src = http://www.mamicode.com/‘images/file.gif‘;lbmc.style.display = ‘none‘;}}//--></script></head><body><div class="mbox"><div class="m1" ><a onClick="javascript:ShowFLT(1)" href="javascript:void(null)" style="text-decoration:none; color:#4B6486">标题1</a></div><div id="LM1" style="DISPLAY: none"><div id="Test5study" class="Test5study"><h2 id="t1" onClick="ShHi(‘t1‘,‘h1‘);">QQ空间站</h2><ul class="TxtList" id="h1" ><li><a href="http://www.js323.com/">网页特效</a></li><li><a href="http://www.js323.com">团购导航</a></li><li><a href="http://www.js323.com/">Qvod电影</a></li><li><a href="http://www.js323.com/">搜搜问问</a></li><li><a href="http://www.js323.com/">生活常识</a></li><li><a href="http://www.js323.com/">链接平台</a></li><li><a href="http://www.js323.com/">源码下载</a></li></ul><h2 id="t2" onClick="ShHi(‘t2‘,‘h2‘);">网页特效①</h2><ul class="TxtList" id="h2" style="display:none;"><li><a href="http://www.js323.com/" title="">菜单导航特效</a></li><li><a href="http://www.js323.com/" title="">图层样式特效</a></li><li><a href="http://www.js323.com/" title="">链接文本特效</a></li><li><a href="http://www.js323.com/" title="">图形图像特效</a></li><li><a href="http://www.js323.com/" title="">鼠标特效代码</a></li><li><a href="http://www.js323.com/" title="">页面窗口特效</a></li></ul><h2 id="t3" onClick="ShHi(‘t3‘,‘h3‘);">网页特效②</h2><ul class="TxtList" id="h3" style="display:none;"><li><a href="http://www.js323.com/" title="">网页背景特效</a></li><li><a href="http://www.js323.com/" title="">日期时间特效</a></li><li><a href="http://www.js323.com/" title="">页面搜索特效</a></li><li><a href="http://www.js323.com/" title="">表格表单特效</a></li><li><a href="http://www.js323.com/" title="">其他网页特效</a></li></ul><h2 id="t4" onClick="ShHi(‘t4‘,‘h4‘);">传说中的标题</h2><ul class="TxtList" id="h4" style="display:none;"><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul></div></div></div><div class="mbox"><div class="m1" ><a onClick="javascript:ShowFLT(2)" href="javascript:void(null)" style="text-decoration:none; color:#4B6486">标题2</a></div><div id="LM2" style="DISPLAY: none"><div id="Test5study" class="Test5study"><h2 id="t5" onClick="ShHi(‘t5‘,‘h5‘);">传说中的标题2</h2><ul class="TxtList" id="h5" ><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul><h2 id="t6" onClick="ShHi(‘t6‘,‘h6‘);">传说中的标题2</h2><ul class="TxtList" id="h6" style="display:none;"><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul><h2 id="t7" onClick="ShHi(‘t7‘,‘h7‘);">传说中的标题2</h2><ul class="TxtList" id="h7" style="display:none;"><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul><h2 id="t8" onClick="ShHi(‘t8‘,‘h8‘);">传说中的标题2</h2><ul class="TxtList" id="h8" style="display:none;"><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul></div></div></div><script type="text/javascript">function $(d){return document.getElementById(d);}function f(d){var t=$(d);if (t){return t.style;}else{return null;}}function Hi(){var items = document.getElementsByTagName("ul");for (var i=0;i<items.length;i++){items[i].style.display=‘none‘;}}function Hl(){var iteml = document.getElementsByTagName("h2");for (var j=0;j<iteml.length;j++){iteml[j].style.fontWeight=‘normal‘;}}function h(d){var s=f(d);var b=s.display;if (b==‘none‘){return true;}else{return false;}}function ShHi(ii,jj){if(h(jj)){Hl();Hi();f(jj).display=‘block‘;f(ii).fontWeight=‘bold‘;}else{Hl();Hi();f(jj).display=‘none‘;f(ii).fontWeight=‘normal‘;}}</script></body></html>
JS+CSS打造仿QQ面板的三级折叠下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。