js树形导航菜单点击展开收缩二级下拉菜单插件


js树形导航菜单点击展开收缩二级下拉菜单插件
js树形导航菜单点击展开收缩二级下拉菜单插件以及树形导航菜单、点击展开收缩、二级下拉等js/jquery网页特效代码下载。

1. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#5e5e5e;font-size:12px;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* nav_menu */
.nav_menu{width:560px;margin:100px auto;}
.nav_menu dl{background:url(images/verline.gif) repeat-y 4px 0;}
.nav_menu dl dt a{height:24px;line-height:24px;overflow:hidden;color:#3366cc;font-weight:800;}
.nav_menu dl dt a span{display:inline-block;width:13px;height:15px;overflow:hidden;float:left;margin:0 5px 0 0;}
.nav_menu dl dt a.minus span{background:url(images/showbtn.gif) no-repeat;}
.nav_menu dl dt a.plus span{background:url(images/hidebtn.gif) no-repeat;}
.nav_menu dl dd li{height:24px;line-height:24px;background:url(images/lineleft.gif) no-repeat 4px -6px;padding:0 0 0 18px}
</style>
<script type="text/javascript">
function getObject(objectId){
	if(document.getElementById && document.getElementById(objectId)){
		return document.getElementById(objectId);
	}else if(document.all && document.all(objectId)){
		return document.all(objectId);
	}else if(document.layers && document.layers[objectId]){
		return document.layers[objectId];
	}else{
		return false;
	}
}
function showHide(e,objname){
	var obj = getObject(objname);
	if(obj.style.display == "none"){
		obj.style.display = "block";
		e.className="minus";
	}else{
		obj.style.display = "none";
		e.className="plus";
	}
}
</script>
	<div class="nav_menu"> 
		<dl> 
			<dt><a href="javascript:void(0);" class="minus" onclick="showHide(this,'items0');"><span></span>jquery表单特效</a></dt> 
			<dd id="items0"> 
				<ul>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				</ul>
			</dd> 
		</dl> 
		<dl> 
			<dt><a href="javascript:void(0);" class="plus" onclick="showHide(this,'items1');"><span></span>js图片特效</a></dt> 
			<dd id="items1" style="display:none;"> 
				<ul>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				</ul> 
			</dd> 
		</dl>
	</div>

相关推荐

发表评论

相关文章