Javascript制作可折叠式导航菜单 - 栏目, 导航, menu, 菜单, 折叠, 伸缩(好用)
<html>
<head>
</head>
<title>用 Javascript 制作可折叠式导航菜单 - 栏目, 导航, menu, 菜单, 折叠, 伸缩, </title>
<body>
<script type="text/javascript">
function switchMenu(curr_id, total_num)
{
for(var i=0; i<total_num; i++)
{
//二级菜单
var el = document.getElementById('menu_sub_'+i);
if(!el) return;
//一级菜单前面的图片
var img = document.getElementById('menu_master_'+i);
if(i == curr_id)
{
el.style.display = "block";
img.src = "open.gif";
}
else
{
el.style.display = "none";
img.src = "close.gif";
}
}
}
</script>
<style type="text/css">
<!--
#warp {
width:200px;
margin:20px auto;
height:300px;
}
.menu_master {
border:1px solid #ccc;
padding:5px 10px;
margin-bottom:2px;
cursor:pointer;
font-weight:bold;
color:#666;
}
.menu_master img { vertical-align:middle; }
.sub_menu { display:none; }
.sub_menu ul, .sub_menu ul li {
margin:0;
padding:0;
list-style:none;
}
.sub_menu ul li a {
margin:0 0 3px 10px;
padding:3px 0 2px 25px;
background:url('arrow_001.gif') no-repeat 5px center;
display:block;
height:18px;
border-bottom:1px solid #eee;
color:#666;
text-decoration:none;
}
-->
</style>
<div id="warp">
<div class="menu_master" onclick="javascript:switchMenu(0, 4);">
<img src="close.gif" alt="close" id="menu_master_0" /> PHP/MySQL
</div>
<div id="menu_sub_0" class="sub_menu">
<ul>
<li><a href="http://www.knowsky.com/article.asp?typeid=1" title="ASP教程">ASP教程</a></li>
<li><a href="http://www.knowsky.com/article.asp?typeid=2" title="ASP技巧">ASP技巧</a></li>
<li><a href="http://www.knowsky.com/article.asp?typeid=4" title="ASP实例">ASP实例</a></li>
</ul>
</div>
<div class="menu_master" onclick="javascript:switchMenu(1, 4);">
<img src="close.gif" alt="close" id="menu_master_1" /> (X)HTML/CSS
</div>
<div id="menu_sub_1" class="sub_menu">
<ul>
<li><a href="http://www.codebit.cn/pub/html/xhtml_css/tutorial/" title="(X)HTML/CSS教程">(X)HTML/CSS教程</a></li>
<li><a href="http://www.codebit.cn/pub/html/xhtml_css/tip/" title="(X)HTML/CSS小技巧">(X)HTML/CSS小技巧</a></li>
</ul>
</div>
<div class="menu_master" onclick="javascript:switchMenu(2, 4);">
<img src="close.gif" alt="close" id="menu_master_2" /> Ajax
</div>
<div id="menu_sub_2" class="sub_menu">
<ul>
<li><a href="http://www.codebit.cn/pub/html/ajax/tutorial/" title="Ajax教程">Ajax教程</a></li>
<li><a href="http://www.codebit.cn/pub/html/ajax/tip/" title="Ajax小技巧">Ajax小技巧</a></li>
</ul>
</div>
<div class="menu_master" onclick="javascript:switchMenu(3, 4);">
<img src="close.gif" alt="close" id="menu_master_3" /> Javascript
</div>
<div id="menu_sub_3" class="sub_menu">
<ul>
<li><a href="http://www.codebit.cn/pub/html/javascript/tutorial/" title="Javascript教程">Javascript教程</a></li>
<li><a href="http://www.codebit.cn/pub/html/javascript/tip/" title="Javascript小技巧">Javascript小技巧</a></li>
</ul>
</div>
</div>
</body>
</html>