UI - 竖向折叠手风琴导航菜单[JS+div+css]

最新推荐文章于 2020-04-14 08:03:18 发布

G机器猫

最新推荐文章于 2020-04-14 08:03:18 发布

阅读量3.5k

点赞数

分类专栏： Javascript.CSS.Ajax

Javascript.CSS.Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

出自： http://www.198zone.com/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+div+css实现竖向折叠手风琴导航菜单插件 - 代码笔记 www.198zone.com</title>
</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* menuDiv */
.menuDiv{border:1px solid #CCCCCC;background:#FFFFFF;padding:1px;}
.menuDiv h3{font-size:14px;font-weight:bold;color:#FFFFFF;padding:5px 5px 5px 15px;background:#006699;cursor:pointer;height:22px;line-height:22px;overflow:hidden;}
.menuDiv ul li{color:#333333;background:#EEEEEE;padding:5px 5px 5px 15px;font-size:12px;margin:1px 0 0 0;height:16px;}
.menuDiv ul li a{color:#333333;background:#F4F4F4;display:block;padding:5px 5px 5px 15px;font-size:12px;margin:-5px -5px -5px -15px;text-decoration:none;height:16px;}
.menuDiv ul li a:hover{color:#FFFFFF;background:#006699;}
</style>

<div style="width:268px;margin:50px auto;">

	<div class="menuDiv"> 
		<h3>JS代码</h3> 	  
		<ul>
			<li><a href="http://www.198zone.com/">导航菜单</a></li>
			<li><a href="http://www.198zone.com/">焦点幻灯片</a></li>
			<li><a href="http://www.198zone.com/">网页特效</a></li>
			<li><a href="http://www.198zone.com/">广告代码</a></li>
			<li><a href="http://www.198zone.com/">jQuery</a></li>
			<li><a href="http://www.198zone.com/">jQuery弹出层</a></li>
			<li><a href="http://www.198zone.com/">QQ客服</a></li>
		</ul>
	</div>

	<div class="menuDiv"> 
		<h3>欣赏借鉴</h3> 
		<ul>
			<li><a href="http://www.198zone.com/">企业类网站</a></li>
			<li><a href="http://www.198zone.com/">行业类网站</a></li>
			<li><a href="http://www.198zone.com/">BLOG类网站</a></li>
			<li><a href="http://www.198zone.com/">门户类网站</a></li>
			<li><a href="http://www.198zone.com/">商城类网站</a></li>
		</ul>
	</div>

	<div class="menuDiv"> 
		<h3>建站技巧</h3> 
		<ul>
			<li><a href="http://www.198zone.com/">企业类网站</a></li>
			<li><a href="http://www.198zone.com/">行业类网站</a></li>
			<li><a href="http://www.198zone.com/">BLOG类网站</a></li>
			<li><a href="http://www.198zone.com/">门户类网站</a></li>
			<li><a href="http://www.198zone.com/">商城类网站</a></li>
			<li><a href="http://www.198zone.com/">企业类网站</a></li>
			<li><a href="http://www.198zone.com/">行业类网站</a></li>
			<li><a href="http://www.198zone.com/">BLOG类网站</a></li>
			<li><a href="http://www.198zone.com/">门户类网站</a></li>
			<li><a href="http://www.198zone.com/">商城类网站</a></li>
		</ul>
	</div>

	<div class="menuDiv"> 
		<h3>YY频道设计</h3> 
		<ul>
			<li><a href="http://www.198zone.com/">yy娱乐频道设计</a></li>
			<li><a href="http://www.198zone.com/">yy情侣频道设计图</a></li>
			<li><a href="http://www.198zone.com/">yy游戏频道设计图</a></li>
			<li><a href="http://www.198zone.com/">YY个性签名</a></li>
		</ul>
	</div>

</div>

<script type="text/javascript">
function MenuSwitch(className){		
	this._elements = [];
	this._default = -1;
	this._className = className;
	this._previous = false;
}
MenuSwitch.prototype.setDefault = function(id){
	this._default = Number(id);
}
MenuSwitch.prototype.setPrevious = function(flag){
	this._previous = Boolean(flag);
}
MenuSwitch.prototype.collectElementbyClass = function(){
	this._elements = [];
	var allelements = document.getElementsByTagName("div");
	for(var i=0;i<allelements.length;i++){
		var mItem = allelements[i];
		if (typeof mItem.className == "string" && mItem.className == this._className){
			var h3s = mItem.getElementsByTagName("h3");
			var uls = mItem.getElementsByTagName("ul");
			if(h3s.length == 1 && uls.length == 1){
				h3s[0].style.cursor = "hand";					
				if(this._default == this._elements.length){
					uls[0].style.display = "block";	
				}else{
					uls[0].style.display = "none";	
				}
				this._elements[this._elements.length] = mItem;
			}				
		}
	}
}
MenuSwitch.prototype.open = function(mElement){
	var uls = mElement.getElementsByTagName("ul");
	uls[0].style.display = "block";
}
MenuSwitch.prototype.close = function(mElement){
	var uls = mElement.getElementsByTagName("ul");
	uls[0].style.display = "none";
}
MenuSwitch.prototype.isOpen = function(mElement){
	var uls = mElement.getElementsByTagName("ul");		
	return uls[0].style.display == "block";
}
MenuSwitch.prototype.toggledisplay = function(header){
	var mItem;
	if(window.addEventListener){
		mItem = header.parentNode;
	}else{
		mItem = header.parentElement;
	}
	if(this.isOpen(mItem)){
		this.close(mItem);
	}else{
		this.open(mItem);
	}		
	if(!this._previous){
		for(var i=0;i<this._elements.length;i++){
			if(this._elements[i] != mItem){				
				var uls = this._elements[i].getElementsByTagName("ul");
				uls[0].style.display = "none";		
			}
		}
	}
}	
MenuSwitch.prototype.init = function(){		
	var instance = this;
	this.collectElementbyClass();
	if(this._elements.length==0){
		return;
	}
	for(var i=0;i<this._elements.length;i++){
		var h3s = this._elements[i].getElementsByTagName("h3");			
		if(window.addEventListener){
			h3s[0].addEventListener("click",function(){instance.toggledisplay(this);},false);
		}else{
			h3s[0].onclick = function(){instance.toggledisplay(this);}
		}
	}
}
</script>



<script language="javascript">
var mSwitch = new MenuSwitch("menuDiv");
mSwitch.setDefault(0);
mSwitch.setPrevious(false);
mSwitch.init();
</script>
<!--以下无正文 转载或者使用请注释出自代码笔记 www.198zone.com-->
 <div style="width:960px;margin:10px auto; clear:both; text-align:center;  ">
<script src="http://www.198zone.com/statics/js/ad/96090.js" type="text/javascript"></script>
</div>
<div style="width:960px;margin:20px auto; clear:both; text-align:center; font-size:12px; line-height:25px;    ">
<a href="http://www.198zone.com"  style="color:#333"><strong>代码笔记整理</strong></a> </strong>
 转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。
<br>
关注更多代码笔记更新 请加入代码笔记交流群 ： <strong>8019996</strong> <a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=f19215a1ef0ab2c1d1c163df664fa1bf875bb0f30042403192309b5e0a2c22de"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="代码笔记资源分享群①" title="代码笔记资源分享群①"></a> <a style="list-style:none" href="http://www.198zone.com/helpweb/2013045.html" target="_blank"><strong>( 查看更多代码笔记QQ群 )</strong></a>
<script src="http://www.198zone.com/statics/js/inc_share.js"  type="text/javascript"></script>
<script src="http://www.198zone.com/statics/js/inc_statistics.js"  type="text/javascript"></script>
<script src="http://www.198zone.com/statics/js/inc_monitor.js"  type="text/javascript"></script> 
</div>
<!--以上无正文 转载或者使用请注释出自代.码.笔.记 www.198zone.com-->

</body>
</html>

后面根据这个demo进行javascript的学习。

G机器猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
UI - 竖向折叠手风琴导航菜单[JS+div+css]

JS+div+css实现竖向折叠手风琴导航菜单插件 - 代码笔记 www.198zone.com*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}/* menuDiv */.menuDiv{borde
复制链接

扫一扫