利用ASP和XML制作菜单导航系统
来源:网页教学 时间:06-12-25 点击: 点击这里收藏本文
< A id="start" onClick="startIt('menu1',this,0)" >
< B >< FONT color="#FFFFFF" >网站< /FONT >< /B >
< IMG src="images/yellow_arrow_down2.gif" width="20" height="11" border=0 >
< /A >
onClick事件中指定的startIt()函数有三个参数：菜单名字，一个链接本身的引用，菜单层次。由于此时刚开始启动菜单系统，因此指定层次为0。
虽然一个页面中可以有一个以上的菜单，但任何时候可见的菜单只有一个。startIt()函数检查菜单是否已经激活。如果没有激活，则调用下面的stateChange()函数。此外，startIt()还必须在菜单活动的时候隐藏HTML < SELECT >元素和Java Applet（如果存在的话，参见startIt()的实现代码）。
function stateChange(menu,thisItem,level) {
//menu =待显示的菜单,thisItem=当前菜单项的< SPAN >
//level=菜单嵌套层次
//鼠标所指向的菜单项改变,改变高亮度状态
if (currentSpanElement != thisItem.id && started != true) {
//这行代码仅在第一次进入时有用
if (currentSpanElement == "") currentSpanElement = thisItem.id;
eItemOld = eval("document.all('" + currentSpanElement + "')");
eItemNew = eval("document.all('" + thisItem.id + "')");
eParent = eItemNew.parentElement;
//必须设置DIV背景色,否则默认透明
eParent.style.background = offCellColor;
//取消以前鼠标停留菜单项的高亮度颜色
eItemOld.style.background = offCellColor;
eItemOld.style.color = offTextColor;
//突出显示新选中的菜单项
eItemNew.style.background = onCellColor;
eItemNew.style.color = onTextColor;
//跟踪最后鼠标停留的位置
currentSpanElement = thisItem.id;
}
if (menu != "") {
eMenu = eval("document.all('" + menu + "')");
eItem = eval("document.all('" + thisItem.id + "')");
hideDiv(level);
//跟踪已经打开(显示)的菜单
menuArray[menuArray.length] = menu;
var positionX = eItem.parentElement.offsetLeft +
offsetMenuX + document.body.scrollLeft;
var positionY = eItem.parentElement.offsetTop +
eItem.offsetTop + offsetMenuY + document.body.scrollTop;
if (started) {
positionX = clickX + startDistanceX + document.body.scrollLeft
positionY = clickY + startDistanceY + document.body.scrollTop
}
//如果屏幕宽度不足,将菜单显示位置左移
if ((positionX + eMenu.offsetWidth) >= document.body.clientWidth) {
positionX -= (eMenu.offsetWidth * 1.3);
positionY += 15;
}
//如果菜单位置偏左,则右移
if ((positionX + eMenu.offsetWidth) < = eMenu.offsetWidth) {
positionX += (eMenu.offsetWidth * 1.3);
}
//如果菜单偏下,则上移菜单,使其底部和浏览窗口底部对齐
if ((positionY + eMenu.offsetHeight) >= document.body.clientHeight) {
if (started != true) positionY = document.body.clientHeight - eMenu.offsetHeight;
}
eMenu.style.left = positionX;
eMenu.style.top = positionY;
//如果没有在ASP脚本中翻转数组,使用下面这行代码
//eMenu.style.zIndex = level;
把此文章收藏到：
