我其实是想作如下操作。
点击一级菜单,然后把菜单项的id传到数据库,通过从数据库中提取二级菜单项,放入datalist控件中显示出来,然后单击相应的二级菜单项,连接到相应的网页。
如果大家有好的例子,帮忙推荐下。如果好使,可加分。谢谢。
效果如下:
|人事管理|项目管理|文档管理|
当点击“人事管理”后
下边出现:|人员录入|人员查询|(这是用DATALIST控件显示出来的)!!!
当点击,“人员录入”时,将显示相应窗口
十分着急,各位大侠帮忙,江湖告急!!!!!!
点击一级菜单,然后把菜单项的id传到数据库,通过从数据库中提取二级菜单项,放入datalist控件中显示出来,然后单击相应的二级菜单项,连接到相应的网页。
如果大家有好的例子,帮忙推荐下。如果好使,可加分。谢谢。
效果如下:
|人事管理|项目管理|文档管理|
当点击“人事管理”后
下边出现:|人员录入|人员查询|(这是用DATALIST控件显示出来的)!!!
当点击,“人员录入”时,将显示相应窗口
十分着急,各位大侠帮忙,江湖告急!!!!!!
/**
*菜单的构造,需要绑定到onload
*/
startList = function() {
if (document.all&&document.getElementById) {
dropmenuRoot = document.getElementById("dropmenu");
for (i=0; i<dropmenuRoot.childNodes.length; i++) {
node = dropmenuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
//开始灌水
for(j=0;j<this.childNodes.length;j++){
if (this.childNodes[j].nodeName=="UL"){
if (this.childNodes[j].childNodes[0].nodeName=="LI"){
if (this.offsetLeft+this.childNodes[j].childNodes.length*this.childNodes[j].childNodes[0].offsetWidth-dropmenuRoot.offsetLeft>dropmenuRoot.offsetWidth){
var len=this.childNodes[j].childNodes.length*this.childNodes[j].childNodes[0].offsetWidth; //菜单的长度
(len>dropmenuRoot.offsetWidth) ? this.childNodes[j].style.width=776+"px" : this.childNodes[j].style.width=len+"px"; //给ul设置宽度如果子菜单比较多,大于容器的宽度,那么ul的宽度就是容器的宽度
len =this.offsetLeft+len-dropmenuRoot.offsetLeft-dropmenuRoot.offsetWidth;
(len>this.offsetLeft-dropmenuRoot.offsetLeft) ? this.childNodes[j].style.marginLeft=-(this.offsetLeft-dropmenuRoot.offsetLeft) : this.childNodes[j].style.marginLeft=-len+"px";
}
}
}
}
}
//灌水完毕
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<body>
<div id="nav">
<ul id="dropmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">Offices</a></li> <li><a href="#">History</a></li>
<li><a href="#">Team</a></li> </ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">Offices</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">Offices</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Drop Down Menu</a></li> </ul>
</li>
<li><a href="#">Home</a></li>
</ul>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>...</title>
<STYLE type=text/css>.sec1 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #FF99CC
}
.sec2 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #FFE1F5
}
.main_tab {
BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #FFE1F5
}
</STYLE>
<SCRIPT language=javascript>
function secBoard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="block";
}
</SCRIPT>
</head><body>
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=300 border=0 class="css3">
<TBODY>
<TR align=middle height=20>
<TD class=sec2 onclick=secBoard(0) width="10%">人事管理</TD>
<TD class=sec1 onclick=secBoard(1) width="10%">项目管理</TD>
<TD class=sec1 onclick=secBoard(2) width="10%">文档管理</TD>
</TR></TBODY></TABLE>
<TABLE class=main_tab id=mainTable height=180 cellSpacing=0 cellPadding=0 width=300 border=0>
<TBODY style="DISPLAY: block">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=291 border=0>
<TBODY>
<TR>
<TD>...</TD>
</TR>
</TBODY>
</TABLE>
</TD></TR></TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=291 border=0>
<TBODY>
<TR>
<TD class="css3">...</TD>
</TR>
</TBODY>
</TABLE>
</TD></TR></TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=291 border=0>
<TBODY>
<TR>
<TD class="css3">.</TD>
</TR>
</TBODY>
</TABLE>
</TD></TR></TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=middle><BR><BR>
</table>
</TD>
</TR></TBODY></TABLE>
</body></html>
我其实是想作如下操作。
点击一级菜单(图标),然后把菜单id传到后台*.aspx的程序中,通过程序从数据库中提取二级菜单项,再将菜单项放入datalist控件中显示出来,并单机相应的二级菜单项,连接到相应的网页。
如果大家有好的例子,帮忙推荐下。如果好使,一样给分。谢谢。