用 Javascript 制作可折叠式导航菜单

当栏目级别较多时,很多人都会考虑使用可折叠式导航菜单,既方便点击又节省空间,本文介绍的是对可折叠式导航菜单的简单实现,希望对新手有帮助。

用 Javascript 制作可折叠式导航菜单 – 示例

 
<script type="text/javascript">
// 说明:用 Javascript 制作可折叠式导航菜单
// 整理:http://www.CodeBit.cn

// curr_id : 当前id ; total_num 总共有几个菜单
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 = "img/open.gif";
		}
		else
		{
			el.style.display = "none";
			img.src = "img/close.gif";
		}
	}
}
</script>
 
<style type="text/css">
<!--
#warp {
	width:200px;
	margin:100px auto;
}
.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('img/fw.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.codebit.cn/pub/html/php_mysql/tutorial/" title="PHP/MySQL教程">PHP/MySQL教程</a></li>
			<li><a href="http://www.codebit.cn/pub/html/php_mysql/tip/" title="PHP/MySQL小技巧">PHP/MySQL小技巧</a></li>
			<li><a href="http://www.codebit.cn/pub/html/php_mysql/problem/" title="PHP/MySQL常见问题">PHP/MySQL常见问题</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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>