导航菜单-php手册-PHP中文网

导航菜单

php中文网

发布： 2016-06-06 19:35:48

原创

1247人浏览过

简单的web收缩菜单，主要是js 无 function MenuSwitch(className){this._elements = [];this._default = -1;this._className = className;this._previous = false;}MenuSwitch.prototype.setDefault = function(id){this._default = Number(id);}MenuSwitch.p

简单的web收缩菜单，主要是js

	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);}
			}
		}
	}

登录后复制

<?php
/*
 * Created on 
 *
 * To change the template for this generated file go to
 * Window - Preferences - PHPeclipse - PHP - Code Templates
 */

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>主框架</title>
<style type="text/css"> 

body,td,th,div,a,h3,textarea,input{
	font-family: "宋体", "Times New Roman", "Courier New";
	font-size: 12px;
	color: #333333;
}
html{
	overflow-x:hidden;
	overflow-y:hidden;
}
.menuHtml{
	overflow-y:auto;
}
body {
	background-color: ##E6F4FA;
	margin: 0px;
}
img{
	border: none;
}
form{
	margin: 0px;
	padding: 0px;
}
input{
	color: #000000;
	height: 22px;
	vertical-align: middle;
}
textarea{
	width: 80%;
	font-weight: normal;
	color: #000000;
}
a{
	text-decoration: none;
	color: #666666;
}
a:hover{
	text-decoration: none;
}
.menuDiv,.menuDiv1{
	background-color: #FFFFFF;
}
.menuDiv1{
	postion:relative;bottom:0px;top:50;
}
.menuDiv h3,.menuDiv1 h3{
	font:bold 12px "Microsoft Yahei",sans-serif;color:#000;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	background:url(/CodeIgiter/images/tab_05.gif);
	margin: 0px;cursor:pointer;
}
.menuDiv1 h3 {color:#ff0000;}
.menuDiv ul,.menuDiv1 ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
.menuDiv ul li,.menuDiv1 ul li{
	color: #666666;
	background:url(/CodeIgiter/images/arrow_082.gif) 14px 6px no-repeat;background-color:#bce2fc;
	padding: 5px 5px 5px 30px;
	font-size: 12px;
	height: 16px;border-bottom:1px solid #fff;
}
.menuDiv ul li a,.menuDiv1 ul li a{
	color: #666666;
	text-decoration: none;
}
.menuDiv ul li a:hover,.menuDiv1 ul li a:hover{	
	color: #ff0000;text-decoration: underline;
}
.red{
	color:#FF0000;
}

</style>
 </head>

 <body>
	<div class="menuDiv"> 
	  <h3>留存</h3>
		<ul>
			<li><a href="/CodeIgiter/index.php/kkdata/data/baseInfoEx" target="data"><font color="blue">用户基础数据</font></a></li>
			<li><a href="/CodeIgiter/index.php/CodeIgiter/index.php/kkdata/data/baseData" target="data"><font color="blue">用户留存统计</font></a></li>
			<li><a href="/CodeIgiter/index.php/kkdata/data/loginData" target="data"><font color="blue">用户登陆统计</font></a></li>
		</ul>
	  </div> 
	  
	      206     <div class="menuDiv">
    207      <h3>客服支持</h3>
    208         <ul>
    209             <li><a href="link" target="data" >货币申请</a></li>
    210             <li><a href="link" target="data" >发布系统信息</a></li>
    211             <li><a href="link" target="data" >玩家反馈信息</a></li>
    212             <li><a href="link" target="data" >玩家状态管理</a></li>
    213         </ul>
    214     </div>
    215     <div class="menuDiv">
    216     <h3>权限管理</h3>
    217         <ul>
    218             <li><a href="link" target="data" >添加管理员</a></li>
    219             <li><a href="link" target="data" >权限分配</a></li>
    220         </ul>
    221     </div>
    222 
    223 <script type="text/javascript" language="javascript" src="/jsfile/menuswitch.js"></script>
    224 <script language="javascript">
    225     var mSwitch = new MenuSwitch("menuDiv");
    226     mSwitch.setDefault(0);
    227     mSwitch.setPrevious(false);
    228     mSwitch.init();
    229 </script>
    230 </body>
    231 </html>

登录后复制