二款js折叠菜单代码
二款js折叠菜单代码
文章收藏了二js折叠菜单代码里面有二级折叠菜单也有三级的，如果你正在制作网站后台或要找竖向简洁的折叠菜单这款非常不错哦，下面你可以一款款选择哦。
<html>
<head>
<title>小巧的折叠菜单</title>
<script language="网页特效">
<!-- begin
var refer=true;
function combo() {
if (refer) {
document.all.contents.style.visibility="visible";
refer=false;
}
else {
document.all.contents.style.visibility="hidden";
refer=true;
}
}</script>
</head>
<body>
<table align="center">
<tr><td>
<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#d8d8d8">
<tr>
<td bgcolor="ff9900">
<font color=#ffffff> 脚本资源实例
</td>
<td align="right" width="21">
<img src="" name="combo_arrow" width="21" height="21" alt="" border="0" onclick="combo()" onclick="javascript:window.open(this.src);" style="cursor: pointer"></td>
</tr>
</table>
<div id="contents" style="position:absolute; left:?px; top:?px; width:?px; height:?px; z-index:1; visibility:hidden">
<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#d8d8d8">
<tr>
<td bgcolor="ff9900">
<font face="verdana" size="2">
<a href="/search.php教程?keyword=ajax" target="_blank" onclick="javascript:window.open(this.src);" >ajax</a> |
<a href="/sort/list_11_1.shtml" target="_blank" onclick="javascript:window.open(this.src);" >extjs</a> |
<a href="/sort/list_11_1.shtml" target="_blank" onclick="javascript:window.open(this.src);" >jquery</a> |
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>实例代码二
css教程+js竖向简洁的折叠菜单，支持三级分类，红色垂直型，个人感觉非常棒
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml2/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.zzzyk.com/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css+js竖向简洁的折叠菜单</title>
<style>
#outer {width:504px; height:510px; position:relative; background:url(/jscss/demoimg/200907/red_frog.jpg) no-repeat 0px 160px;}
#outer #content {clear:left; position:absolute; left:230px; top:10px; width:250px; z-index:10;}
#menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
#menu ul {list-style-type:none; padding:0; margin:0; width:125px;}
#menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}
#menu li.sub {background:#d30;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; cursor:pointer; font-weight:bold; text-indent:5px;}
#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}
#menu li.hover {color:#ff0; z-index:500;}
#menu li.click {color:#ff0;}
#menu li.click ul {display:block;}
#menu li.click ul li.hover ul,
#menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px;}
#menu li.click ul li.fly {background: #657 url(/jscss/demoimg/200907/frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover {background:#98a;}
#menu li.click ul li.hover ul li {background:#c60;}
#menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}
#menu li.click ul li.hover ul li.fly {background: #c60 url(/jscss/demoimg/200907/frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}
#menu li.click ul li.hover ul li.hover a {color:#000;}
#menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
#menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}
#outer img {display:block; float:right;}
#outer p {margin:0px; padding:17px 0 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}
</style><script type="text/javascript">
clickmenu = function(menu) {
var getels = document.getelementbyid(menu).getelementsbytagname("li");
var getagn = getels;for (var i=0; i<getels.length; i++) {
getels[i].onclick=function() {
for (var x=0; x<getagn.length; x++) {
getagn[x].classname=getagn[x].classname.replace("unclick", "");
getagn[x].classname=getagn[x].classname.replace("click", "unclick");
}
if ((this.classname.indexof('unclick'))!=-1) {
this.classname=this.classname.replace("unclick", "");;
}
else {
this.classname+=" click";
}
}
getels[i].onmouseo教程ver=function() {
this.classname+=" hover";
}
getels[i].onmouseout=function() {
this.classname=this.classname.replace("hover", "");
}
}
}
</script></head>
<body onload="clickmenu('menu')">
<div id="outer">
<ul id="menu">
<li class="sub">types
<ul>
<li><a href="#nogo">indian</a></li>
<li><a href="#nogo">韩国</a></li>
<li class="fly"><a href="#nogo">美国</a>
<ul>
<li><a href="#nogo">朝鲜</a></li>
<li class="fly"><a href="#nogo">南朝鲜</a>
<ul>
<li><a href="#nogo">西大街</a></li>
<li><a href="#nogo">东大街</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo">日本语</a></li>
<li><a href="#nogo">简体中文</a></li>
</ul>
</li>
<li class="sub">地区分布
<ul>
<li class="fly"><a href="#nogo">北京</a>
<ul>
<li><a href="#nogo">hemiphractus</a></li>
<li><a href="#nogo">stefania</a></li>
</ul>
</li>
<li class="fly"><a href="#nogo">河南</a>
<ul>
<li><a href="#nogo">acris</a></li>
<li><a href="#nogo">anotheca</a></li>
<li><a href="#nogo">trachycephalus</a></li>
</ul>
</li>
<li class="fly"><a href="#nogo9">武汉</a>
<ul>
<li><a href="#nogo">boophis</a></li>
<li><a href="#nogo">callixalus</a></li>
<li><a href="#nogo">chiromantis</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub">references
<ul>
<li><a href="/">wikipedia</a></li>
<li><a href="#nogo11">encyclopedia</a></li>
</ul>
</li>
<li class="sub">链接
<ul>
<li><a href="#nogo">源码天地</a></li>
<li><a href="#nogo">百度搜索</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
补充：网页制作,js教程 
