menu.jsp

来自「简单实现的商品购物系统」· JSP 代码 · 共 77 行

<%@ page contentType="text/html; charset=GBK" %>


<script type="">
var sub_display = false;

// 颜色数组说明：此数组储存菜单各部份颜色样式，可以改变颜色值达到改变样式的效果
// 值依次为：高亮背景色, 高亮边框色, 菜单栏背景色, 子菜单背景色, 子菜单边框色, 子菜单标题色, 子菜单阴影色

var color = ['#FFFFFF', '#99CCFF', '#FFFFFF', '#FFFFFF', '#99CCFF', '#FFFFFF', '#FFFFFF'];


var menu = new Array();
menu[0] = [['【<a href="index.jsp">爱客首页</a>】', 50], ['<a href=#>我要注册</a>', 'userreg.jsp'], ['<a href=#>书城简介</a>', '#'], ['<a href=#>有奖投票</a>', '#']];
menu[1] = [['【<a href="#">会员管理</a>】', 50], ['<a href=#>修改信息</a>', 'updateuserservlet?action=select'], ['<a href=#>忘记密码</a>', '#'], ['<a href=#>注销用户</a>', 'logout.jsp']];
menu[2] = [['【<a href="#">爱客书城</a>】', 50], ['<a href=#>图书简介</a>', 'bookIndex.jsp'], ['<a href=#>我要订购</a>', '#'], ['<a href=#>图书评论</a>', '#']];
menu[3] = [['【<a href="#">订单查询</a>】', 50], ['<a href=#>修改订单</a>', 'orderIndex.jsp'], ['<a href=#>删除订单</a>', 'orderIndex.jsp'], ['<a href=#>查询订单</a>', 'orderIndex.jsp']];
menu[4] = [['【<a href="#">爱客留言</a>】', 50], ['<a href=#>我要留言</a>', 'bbsIndex.jsp'], ['<a href=#>楼主回复</a>', '#'], ['<a href=#>我要投诉</a>', '#']];


document.write('<table width="100%" height="20" cellspacing="0" cellpadding="0" style="background-image:url(p3.gif); border-left: 0px #F4F4F4 solid; border-top: 0px #F4F4F4 solid; border-right:  0px #999999 solid; border-bottom: 0px #999999 solid;" onSelectStart="return false;" onContextMenu="return false;"><tr><td width="5"><img width="5" height="1"></td><td><table cellspacing="0" cellpadding="2"><tr>');
for (var i=0; i<menu.length; i++)
document.write('<td style="border: 0px ' + color[2] + ' solid; cursor: default;" onClick="Menu_Click(this, ' + i + ')" onMouseOver="Menu_Over(this, ' + i + ')" onMouseOut="Menu_Out(this, ' + i + ')"><nobr><img width="10" height="1">' + menu[i][0][0] + '<img width="10" height="1"></nobr></td>');
document.write('</td></tr></table></tr></table>');

for (var i=0; i<menu.length; i++) {
    document.write('<table id="subMenu" cellspacing="0" cellpadding="0" onSelectStart="return false;" onContextMenu="return false;" style="position: absolute; display: none; top: 120px; border-left: 1px ' + color[4] + ' solid; border-bottom: 1px ' + color[4] + ' solid; cursor: default; filter:progid:dximagetransform.microsoft.dropshadow(color=' + color[6] + ',offx=3,offy=3,positive=true)"><tr><td style="border-top: 1px ' + color[4] + ' solid; border-right: 1px ' + color[4] + ' solid; background-color: ' + color[5] + ';" onClick="subMenu_Hide(false)"><nobr><img width="1" height="2"><br><img width="12" height="1">' + menu[i][0][0] + '<img width="12" height="1"><br><img width="1" height="3"></nobr></td><td style="border-bottom: 1px ' + color[4] + ' solid;" onMouseOver="subMenu_Hide(true)"><img width="' + menu[i][0][1] + '" height="1"></td></tr><tr><td colspan="2" style="border-right: 1px ' + color[4] + ' solid; background-color: ' + color[3] + ';"><table width="100%" cellspacing="1" cellpadding="2" style=" background-color: ' + color[3] + '">');
    for (var j=1; j<menu[i].length; j++)
    document.write('<tr><td style="border: 1px ' + color[3] + ' solid;" onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)" onClick="location.href=\'' + menu[i][j][1] + '\'"><nobr> ' + menu[i][j][0] + '</nobr></td></tr>');
    document.write('</td></tr></table></td></tr></table>');
}

function Menu_Over(obj, s) {
    if (sub_display) {
        subMenu_Show(obj, s)
    }
    else {
        obj.style.backgroundColor = color[0];
        obj.style.border = '1px ' + color[1] + ' solid';
    }
}

function Menu_Out(obj) {
    obj.style.backgroundColor = '';
    obj.style.border = '1px ' + color[2] + ' solid';
}

function Menu_Click(obj, s) {
    subMenu_Show(obj, s)
}

function subMenu_Over(obj) {
    obj.style.backgroundColor = color[0];
    obj.style.border = '1px ' + color[1] + ' solid';
}

function subMenu_Out(obj) {
    obj.style.backgroundColor = '';
    obj.style.border = '1px ' + color[3] + ' solid';
}

function subMenu_Hide(hide) {
    for (var i=0; i<subMenu.length; i++)
    subMenu[i].style.display = 'none';
    sub_display = hide;
}

function subMenu_Show(obj, s) {
    subMenu_Hide(false);
    subMenu(s).style.posLeft = obj.offsetLeft + 6;
    subMenu(s).style.display = '';
    sub_display = true;
}

window.onfocus = subMenu_Hide;
</script>