下拉菜单—滑动型

&lt;style&gt; #newcontainer {
	/*position:relative;*/
	width:750px;
	text-align:left;
	margin:0 auto;
	margin-bottom:10px;
	margin-top:0px;
}
#newnav {
	width:750px !important;
	width:750px;
	height:27px;
	margin:0;
	padding:0;
	border-right:1px solid #d8d8d8;
	border-left:1px solid #d8d8d8;
}
#newnav * {
	padding:0;
	margin:0;
	list-style:none;
	overflow:hidden;
}
#newnav ul {
	width:100%;
	line-height:28px;
	background:url(../images/newnav_bg.jpg) repeat-x top;
}
#newnav li,#newnav li.nr {
	float:left;
	display:inline;
	text-align:center;
	width:85px;
	height:27px;
}
#newnav li.on {
	background:url(../images/newnav_libg1.jpg) repeat-x;
	width:85px;
	font-weight:bold;
}
#newnav li.end {
	background:url(../images/newnav_end1.jpg) repeat-x;
	width:91px;
	font-weight:bold;
}
#newnav a {
	display:block;
	width:85px;
	height:27px;
}
#newnav li a:link {
	background:url(../images/newnav_abg.jpg) no-repeat right;
	text-decoration:none;
	color:#000;
}
#newnav li a:visited {
	background:url(../images/newnav_abg.jpg) no-repeat right;
	color:#000;
	text-decoration:none;
}
#newnav li a:hover {
	background:url(../images/newnav_libg1.jpg) repeat-x;
	font-weight:bold;
	color:#000;
	text-decoration:none;
}
#newnav li a:actived {
	background:url(../images/newnav_abg.jpg) no-repeat right;
	color:#000;
	text-decoration:none;
}
&lt;/style&gt; &lt;script&gt; function showSubType(type) {
	for (var i=1; i&lt;=7; i++) {
		var td = document.getElementById("td"+i);
		if (td.className == "nav_select") td.className = "nav_normal";
	}
	document.getElementById("td"+type).className = "nav_select";
	var sHTML = "  ";
	for (var i=0; i&lt;g_arrResType[type-1].length-1; i++) {
		var nnn = g_arrResType[type-1][i].split("|");
		sHTML += "&lt;a href='" + nnn[1] + "' class='xtitle'&gt;" + nnn[0] + "&lt;/a&gt; | ";
	}
	document.getElementById("sub").innerHTML = sHTML;
}
var g_arrResType = [ [], ["公司论坛|bbs.do","新闻通知|news.do?do=list","考勤统计|timecard.do?do=showStat","通 讯 录|user.do?do=list",], ["工作日志|log.do?do=list","工作管理|work.do?do=list","项目查看|project.do?do=list","计划查看|plan.do?do=list",], ["信息中心|user.do?do=my","薪资查询|wage.do?do=login","历史登录|iprecord.do","修改资料|user.do?do=modifyInfo","修改密码|user.do?do=modifyPwd","个人考勤|timecard.do?do=list","短信息|pm.do?do=inbox",], ["照片中心|photo.do?do=list","我的照片|photo.do?do=mylist","添加照片|photo.do?do=add",], [], [], ];
&lt;/script&gt; &lt;table cellspacing='0' cellpadding='0' width='750' align='center' border='0'&gt;
&lt;tr&gt;
	&lt;td&gt;
		&lt;div id="newcontainer" align="center"&gt;
			&lt;div id="newnav"&gt;
				&lt;ul&gt;
					&lt;li id='td1'&gt;&lt;a href='main.do' onmouseover="showSubType(1)" class='xtitle'&gt;首 页&lt;/a&gt;&lt;/li&gt;
					&lt;li id='td2'&gt;&lt;a href='#' onmouseover="showSubType(2)" class='xtitle'&gt;公司信息&lt;/a&gt;&lt;/li&gt;
					&lt;li id='td3'&gt;&lt;a href='#' onmouseover="showSubType(3)" class='xtitle'&gt;HIS项目&lt;/a&gt;&lt;/li&gt;
					&lt;li id='td4'&gt;&lt;a href='#' onmouseover="showSubType(4)" class='xtitle'&gt;个人信息&lt;/a&gt;&lt;/li&gt;
					&lt;li id='td5'&gt;&lt;a href='#' onmouseover="showSubType(5)" class='xtitle'&gt;靓图闪秀&lt;/a&gt;&lt;/li&gt;
					&lt;li id='td6'&gt;&lt;a href='admin.do' onmouseover="showSubType(6)" class='xtitle'&gt;管理维护&lt;/a&gt;&lt;/li&gt;
					&lt;li id='td7'&gt;&lt;a href='logout.do' onmouseover="showSubType(7)" class='xtitle'&gt;退 出&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
			&lt;div id='sub'&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

100

101

102

103

104

105

106

/*position:relative;*/

width:750px;

text-align:left;

margin:0 auto;

margin-bottom:10px;

margin-top:0px;

}

#newnav {

width:750px !important;

width:750px;

height:27px;

margin:0;

padding:0;

border-right:1px solid #d8d8d8;

border-left:1px solid #d8d8d8;

}

#newnav * {

padding:0;

margin:0;

list-style:none;

overflow:hidden;

}

#newnav ul {

width:100%;

line-height:28px;

background:url(../images/newnav_bg.jpg) repeat-x top;

}

#newnav li,#newnav li.nr {

float:left;

display:inline;

text-align:center;

width:85px;

height:27px;

}

#newnav li.on {

background:url(../images/newnav_libg1.jpg) repeat-x;

width:85px;

font-weight:bold;

}

#newnav li.end {

background:url(../images/newnav_end1.jpg) repeat-x;

width:91px;

font-weight:bold;

}

#newnav a {

display:block;

width:85px;

height:27px;

}

#newnav li a:link {

background:url(../images/newnav_abg.jpg) no-repeat right;

text-decoration:none;

color:#000;

}

#newnav li a:visited {

background:url(../images/newnav_abg.jpg) no-repeat right;

color:#000;

text-decoration:none;

}

#newnav li a:hover {

background:url(../images/newnav_libg1.jpg) repeat-x;

font-weight:bold;

color:#000;

text-decoration:none;

}

#newnav li a:actived {

background:url(../images/newnav_abg.jpg) no-repeat right;

color:#000;

text-decoration:none;

}

</style> <script> function showSubType(type) {

for (var i=1; i<=7; i++) {

var td = document.getElementById("td"+i);

if (td.className == "nav_select") td.className = "nav_normal";

}

document.getElementById("td"+type).className = "nav_select";

var sHTML = " ";

for (var i=0; i<g_arrResType[type-1].length-1; i++) {

var nnn = g_arrResType[type-1][i].split("|");

sHTML += "<a href='" + nnn[1] + "' class='xtitle'>" + nnn[0] + "</a> | ";

}

document.getElementById("sub").innerHTML = sHTML;

}

</script> <table cellspacing='0' cellpadding='0' width='750' align='center' border='0'>

<tr>

<td>

<ul>

<li id='td3'><a href='#' onmouseover="showSubType(3)" class='xtitle'>HIS项目</a></li>

</ul>

</div>

</div>

</td>

</tr>

</table>

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复