Chinaren校友录所用的左边弹出式菜单

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#menu #function #border #class #javascript #table

JavaScript 专栏收录该内容

136 篇文章

订阅专栏

该博客提供了Chinaren校友录所用的左边弹出式菜单代码。代码包含HTML结构、CSS样式和JavaScript脚本。CSS定义了菜单各部分样式，JavaScript实现菜单展开、隐藏、鼠标交互等功能，还设置了菜单选项及相关链接。

代码如下:

<html>
<head>
<title>Chinaren校友录所用的左边弹出式菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.cla2 {font-size: 12px;line-height: 18px;color:#FF6600;text-decoration: none;}
TD {FONT-SIZE: 12px}

/*弹出菜单所用CSS样式*/
.menuspan {	CURSOR: hand; POSITION: absolute}
.menuhead {	PADDING-LEFT: 6px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; WIDTH: 88px; COLOR: #FF6600; PADDING-TOP: 3px; FONT-FAMILY: 宋体}
.menuheadx {	PADDING-LEFT: 6px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; WIDTH: 88px; COLOR: #FF6600; PADDING-TOP: 3px; FONT-FAMILY: 宋体}
.menuhead_open {BORDER: #FED070 1px solid; FONT-SIZE: 12px; FONT-FAMILY: 宋体 ;COLOR: #FF6600;Z-INDEX: 1; BACKGROUND: #E9FFD8;PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; WIDTH: 88px; PADDING-TOP: 2px; }
.menuhead_opensub {	BORDER-TOP: #FED070 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 12px; COLOR: #FF6600; Z-INDEX: 1; BACKGROUND: #E9FFD8; PADDING-BOTTOM: 0px; BORDER-LEFT: #FED070 1px solid; WIDTH: 88px; PADDING-TOP: 2px; BORDER-BOTTOM: #FED070 1px solid; FONT-FAMILY: 宋体 }
.menuhead_click {PADDING-LEFT: 6px; FONT-SIZE: 12px; BACKGROUND: #E9FFD6; PADDING-BOTTOM: 0px; WIDTH: 88px; COLOR: #FF6600; PADDING-TOP: 3px; FONT-FAMILY: 宋体}
.menuhead_clicksub {PADDING-LEFT: 6px; FONT-SIZE: 12px; BACKGROUND: #E9FFD6; PADDING-BOTTOM: 0px; WIDTH: 88px; COLOR: #FF6600; PADDING-TOP: 3px; FONT-FAMILY: 宋体}
.menu {COLOR: #FF6600; BORDER-RIGHT: #FFCF70 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFCF70 1px solid; PADDING-LEFT: 2px; Z-INDEX: -1; BACKGROUND: #E9FFD6; LEFT: 99px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: #FFCF70 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #FFCF70 1px solid; POSITION: absolute}
.menuopt {COLOR: #FF6600; BORDER-RIGHT: #E9FFD6 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #E9FFD6 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND: #E9FFD6; PADDING-BOTTOM: 1px; BORDER-LEFT: #E9FFD6 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #E9FFD6 1px solid; FONT-FAMILY: 宋体}
.menuopt_over {PADDING-RIGHT: 1px;PADDING-LEFT: 6px; FONT-SIZE: 12px; BACKGROUND: #FFFFFF; PADDING-BOTTOM: 2px;COLOR: #FE6700; PADDING-TOP: 2px;FONT-FAMILY: 宋体}
.menuopt_click {PADDING-RIGHT: 1px;PADDING-LEFT: 6px; FONT-SIZE: 12px; BACKGROUND: #FFFFFF; PADDING-BOTTOM: 2px;COLOR: #FE6700; PADDING-TOP: 2px;FONT-FAMILY: 宋体}
/*弹出菜单所用CSS样式*/
</style>
	
<SCRIPT LANGUAGE="JavaScript">
<!--
var current = null;		// indicating current page
function expand(id) {
	var target = document.getElementById(id);
	if (!target)
		return;
	if (current) {
		current.style.display = "none";
	}
	current=target;
	target.style.display="block";
}

/* 
 * This is called from the right window to update the folder list
 * The input is the fragment of html to be inserted to tablist.z
 */
function updateFolderList(s) {
	var target = document.getElementById('tablist.z');
	if (target) {
		target.innerHTML = s;
	} else
		alert ('cannot find tablist.z');
}

menuopen=-1;
menuurlprefix='';

function findObj(n) {
	var x;
	
	d=document;
	if(!(x=d[n])&&d.all) x=d.all[n];
	if(!x && d.getElementById) x=d.getElementById(n);
	return x;
}

function hidemenu(menuid) {
	menuobj=findObj("menu"+menuid)
	menuheadobj=findObj("menuhead"+menuid)
	if(!menuheadobj)return;
	if (menuobj) {
		menuobj.style.visibility='hidden';
	}
	menuheadobj.className='menuhead';

menuopen=-1;
}

function showmenu(menuid) {
	menuobj=findObj("menu"+menuid);
	menuheadobj=findObj("menuhead"+menuid)
	if(!menuheadobj)return;
	if (menuobj) {
		dh=document.body.clientHeight;
		menupos=menuheadobj.parentElement.offsetTop-document.body.scrollTop;
		menuheight=menuobj.clientHeight;
		if((menupos+menuheight>dh)&&(menupos>0)) {
			menutop=dh-(menuheight+menupos)-2;
			if (menutop<-menupos) menutop=-menupos;
			menuobj.style.top=menutop;
		} else {
			menuobj.style.top=0;
		}
		
		menuobj.style.visibility='visible';
		//menuobj.filters.opacity=55;
		//menutobj.filters.opacity=55;

menuheadobj.className='menuhead_opensub';
	} else {
		menuheadobj.className='menuhead_open';
	}

menuopen=menuid;
}

function menuhead_rollon() {
	o=window.event.srcElement;
	openmenuid=o.id.substr(8);

if(menuopen>=0) hidemenu(menuopen);

showmenu(openmenuid);
}

function menu_rollon() {
	o=window.event.srcElement;
	if (o.className == "menuopt") o.className = "menuopt_over";
}

function menu_rolloff() {
	o=window.event.srcElement;
  	if (o.className.substring(0,7) == "menuopt") o.className = "menuopt";
}

function menu_mousedown() {
	o=window.event.srcElement;
	if (o.className == "menuopt_over") o.className = "menuopt_click";
 	if (o.className == "menuhead_open") o.className = "menuhead_click";
 	if (o.className == "menuhead_opensub") o.className = "menuhead_clicksub";
}

function menu_mouseup() {
	o=window.event.srcElement;
 	if (o.className == "menuopt_click") o.className = "menuopt_over";
 	if (o.className == "menuhead_click") o.className = "menuhead_open";
 	if (o.className == "menuhead_clicksub") o.className = "menuhead_opensub";
}

<body>
<table width=114 height=22 border=0 cellpadding=0 cellspacing=2 background=http://images.sohu.com/cs/sms/alumni3/images/cla_bg3.gif>
  <tr> 
    <td align=center valign=bottom>我的校友录</td>
  </tr>
</table>
<table width=114 border=0 cellpadding=0 cellspacing=0>
  <tr> 
    <td class=cla2 align=center>
Hello,Dicky!
    </td>
  </tr>
</table>
<TABLE width=114 border=0 cellPadding=0 cellSpacing=0>
  <TBODY>
    <TR vAlign=top> 
      <TD>
	<SCRIPT language=Javascript>
	menuoptions=new Array(
			new Array('个人设置|#'),
			new Array('&nbsp;&nbsp;收件箱<font color=red style="font-size:10px"></font>&nbsp;|js:openit_mail()|200'),
			
			new Array('&nbsp;&nbsp;修改密码&nbsp;|http://log2.chinaren.com/zhs/chpass.jsp|200'),
			new Array('&nbsp;&nbsp;绑定手机&nbsp;|http://alumni.chinaren.com/class/user_mobile.jsp|200'),
			new Array('学生生涯|#'),
			new Array('&nbsp;&nbsp;我的大学&nbsp;<img src=http://images.sohu.com/cs/sms/alumni3/images/cla_bg31.gif width=3 height=5>|/school/school_search.jsp?schooltype=6|175','盐城老乡会|/class/class_index.jsp?classuuid=2817034545010205664','信息工程系98222|/class/class_index.jsp?classuuid=2815032345892731269','盐城师范学院数学系98（3）班|/class/class_index.jsp?classuuid=2815032345954563666','信工系98226班|/class/class_index.jsp?classuuid=2815032345976764092','98计算机系|/class/class_index.jsp?classuuid=221530','搜索新的大学班级|/school/school_search.jsp?schooltype=6'),
			new Array('&nbsp;&nbsp;我的中学&nbsp;<img src=http://images.sohu.com/cs/sms/alumni3/images/cla_bg31.gif width=3 height=5>|/school/school_search.jsp?schooltype=4|136','1995年入学的高三(8)班|/class/class_index.jsp?classuuid=2815032345911019669','高三(4)班|/class/class_index.jsp?classuuid=2815032345894931767','八班|/class/class_index.jsp?classuuid=2815032345897646845','高三八班|/class/class_index.jsp?classuuid=2815032345897648547','响水县中学高三(8)班  |/class/class_index.jsp?classuuid=2815032345919416808','搜索新的中学班级|/school/school_search.jsp?schooltype=4'),
			new Array('&nbsp;&nbsp;我的小学&nbsp;<img src=http://images.sohu.com/cs/sms/alumni3/images/cla_bg31.gif width=3 height=5>|/school/school_search.jsp?schooltype=1|120','搜索新的小学班级|/school/school_search.jsp?schooltype=1'),
			new Array('&nbsp;&nbsp;其他班级&nbsp;<img src=http://images.sohu.com/cs/sms/alumni3/images/cla_bg31.gif width=3 height=5>|/school/school_search.jsp?schooltype=7|120','搜索其他类型的班级|/school/school_search.jsp?schooltype=7'),
			new Array('&nbsp;&nbsp;我的论坛&nbsp;<img src=http://images.sohu.com/cs/sms/alumni3/images/cla_bg31.gif width=3 height=5>||90','社区精华|http://club.chinaren.com/bbs/index.jsp?boardid=63','型男索女|http://club.chinaren.com/bbs/index.jsp?boardid=4','贴贴图图|http://club.chinaren.com/bbs/index.jsp?boardid=13','情感世界|http://club.chinaren.com/bbs/index.jsp?boardid=8','才毕业|http://club.chinaren.com/bbs/index.jsp?boardid=12','漂在海外|http://club.chinaren.com/bbs/index.jsp?boardid=11'),

new Array('&nbsp;&nbsp;最近访问&nbsp;<img src=http://images.sohu.com/cs/sms/alumni3/images/cla_bg31.gif width=3 height=5>|/school/school_search.jsp|120','搜索班级|/school/school_search.jsp'),

menu_build();
		menu_addevents();

</SCRIPT> 
      </TD>
    </TR>
  </TBODY>
</TABLE>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]