分享
 
 
 

JS实现的一种网页下拉菜单[网页特效]

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

<STYLE type=text/css>#menubar {

BACKGROUND: rgb(212,208,200); FONT: menu; CURSOR: default; POSITION: relative

}

#menubar .root {

BORDER-RIGHT: rgb(212,208,200) 1px solid; PADDING-RIGHT: 2pt; BORDER-TOP: rgb(212,208,200) 1px solid; PADDING-LEFT: 2pt; BORDER-LEFT: rgb(212,208,200) 1px solid; BORDER-BOTTOM: rgb(212,208,200) 1px solid

}

#menubar TABLE {

BORDER-RIGHT: gray 2px solid; PADDING-RIGHT: 0pt; BORDER-TOP: #eeeeee 2px solid; DISPLAY: none; PADDING-LEFT: 0pt; BACKGROUND: rgb(212,208,200); PADDING-BOTTOM: 0pt; MARGIN: 0pt; FONT: menu; BORDER-LEFT: #eeeeee 2px solid; PADDING-TOP: 0pt; BORDER-BOTTOM: gray 2px solid; POSITION: absolute

}

#menubar TABLE TD {

PADDING-RIGHT: 15pt; PADDING-LEFT: 12pt; PADDING-BOTTOM: 2pt; MARGIN: 0pt; PADDING-TOP: 2pt

}

#menubar .highlight {

BACKGROUND: #08246b; COLOR: white

}

#menubar .disabledhighlight {

BACKGROUND: rgb(212,208,200); COLOR: gray

}

#menubar #break {

COLOR: gray

}

#menubar .disabled {

COLOR: gray

}

#menubar #break {

PADDING-RIGHT: 0pt; PADDING-LEFT: 0pt; PADDING-BOTTOM: 0pt; MARGIN: 0pt; PADDING-TOP: 0pt

}

#menubar SPAN.more {

PADDING-RIGHT: 0pt; PADDING-LEFT: 0pt; LEFT: 14pt; FLOAT: right; PADDING-BOTTOM: 0pt; MARGIN: 0pt; FONT: 9pt webdings; WIDTH: 0.8em; PADDING-TOP: 0pt; POSITION: relative; TOP: -2pt; HEIGHT: 9pt

}

#menubar .TBHandle {

BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; FONT-SIZE: 1px; BORDER-LEFT: buttonhighlight 1px solid; WIDTH: 3px; POSITION: absolute; TOP: 1px; HEIGHT: 22px; BACKGROUND-COLOR: menu

}

#menubar .yToolbar {

BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; LEFT: 0px; BORDER-LEFT: buttonhighlight 1px solid; BORDER-BOTTOM: buttonshadow 1px solid; POSITION: relative; TOP: 0px; HEIGHT: 27px; BACKGROUND-COLOR: menu

}

.handbtn {

BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; BACKGROUND: buttonface; BORDER-LEFT: buttonhighlight 1px solid; WIDTH: 3px; BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 21px

}

.sepbtn1 {

BORDER-RIGHT: buttonhighlight 1px solid; BORDER-LEFT: buttonshadow 1px ridge; WIDTH: 2px

}

</STYLE>

<SCRIPT language=javascript>

//数组名+次序号码

//数组内容第一个值为标题

//"样式名称","字体颜色","名称","连接","目标窗口"

OutBarFolder1=new Array(

"系统功能",

"none","default","新建管理人员","add","_blank",

"none","default","浏览管理人员","none","_blank",

"none","default","修改管理人员资料","none","_blank",

"none","default","更改密码","none","_blank",

"none","default","权限分配","none","none",

"break","default","<hr>","none","none",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"break","default","<hr>","none","none",

"none","default","备份数据","none","_top",

"none","default","恢复数据","none","_top",

"break","default","<hr>","none","none",

"none","default","更改个人资料","none","_blank",

"none","default","更改个人密码","none","_blank",

"break","default","<hr>","none","none",

"none","default","退出管理系统","none","_top"

);

OutBarFolder2=new Array(

"系统功能",

"none","default","新建管理人员","add","_blank",

"none","default","浏览管理人员","none","_blank",

"none","default","修改管理人员资料","none","_blank",

"none","default","更改密码","none","_blank",

"none","default","权限分配","none","none",

"break","default","<hr>","none","none",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"break","default","<hr>","none","none",

"none","default","备份数据","none","_top",

"none","default","恢复数据","none","_top",

"break","default","<hr>","none","none",

"none","default","更改个人资料","none","_blank",

"none","default","更改个人密码","none","_blank",

"break","default","<hr>","none","none",

"none","default","退出管理系统","none","_top"

);

OutBarFolder3=new Array(

"系统功能",

"none","default","新建管理人员","add","_blank",

"none","default","浏览管理人员","none","_blank",

"none","default","修改管理人员资料","none","_blank",

"none","default","更改密码","none","_blank",

"none","default","权限分配","none","none",

"break","default","<hr>","none","none",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"none","default","新建管理人员","add","_blank",

"break","default","<hr>","none","none",

"none","default","备份数据","none","_top",

"none","default","恢复数据","none","_top",

"break","default","<hr>","none","none",

"none","default","更改个人资料","none","_blank",

"none","default","更改个人密码","none","_blank",

"break","default","<hr>","none","none",

"none","default","退出管理系统","none","_top"

);

var childActive = null

var menuActive = null

var lastHighlight = null

var active = false

function getReal(el) {

// Find a table cell element in the parent chain */

temp = el

while ((temp!=null) && (temp.tagName!="TABLE") && (temp.className!="root") && (temp.id!="menuBar")) {

if (temp.tagName=="TD")

el = temp

temp = temp.parentElement

}

return el

}

function raiseMenu(el) {

el.style.borderLeft = "1px #08246B solid"

el.style.borderTop = "1px #08246B solid"

el.style.borderRight = "1px #08246B solid"

el.style.borderBottom = "1px #08246B solid"

el.style.background = "#B5BED6"

}

function clearHighlight(el) {

if (el==null) return

el.style.borderRight = "1px lightgrey solid"

el.style.borderBottom = "1px lightgrey solid"

el.style.borderTop = "1px lightgrey solid"

el.style.borderLeft = "1px lightgrey solid"

el.style.background = "rgb(212,208,200)"

}

function sinkMenu(el) {

el.style.borderRight = "1px #EEEEEE solid"

el.style.borderBottom = "1px #EEEEEE solid"

el.style.borderTop = "1px gray solid"

el.style.borderLeft = "1px gray solid"

el.style.background = "rgb(212,208,200)"

}

function menuHandler(menuItem) {

// Write generic menu handlers here!

// Returning true collapses the menu. Returning false does not collapse the menu

return true

}

function getOffsetPos(which,el,tagName) {

var pos = 0 // el["offset" + which]

while (el.tagName!=tagName) {

pos+=el["offset" + which]

el = el.offsetParent

}

return pos

}

function getRootTable(el) {

el = el.offsetParent

if (el.tagName=="TR")

el = el.offsetParent

return el

}

function getElement(el,tagName) {

while ((el!=null) && (el.tagName!=tagName) )

el = el.parentElement

return el

}

function processClick() {

var el = getReal(event.srcElement)

if ((getRootTable(el).id=="menuBar") && (active)) {

cleanupMenu(menuActive)

clearHighlight(menuActive)

active=false

lastHighlight=null

doHighlight(el)

}

else {

if ((el.className=="root") || (!menuHandler(el)))

doMenuDown(el)

else {

if (el._childItem==null)

el._childItem = getChildren(el)

if (el._childItem!=null) return;

if ((el.id!="break") && (el.className!="disabled") && (el.className!="disabledhighlight") && (el.className!="clear")) {

if (menuHandler(el)) {

cleanupMenu(menuActive)

clearHighlight(menuActive)

active=false

lastHighlight=null

}

}

}

}

}

function getChildren(el) {

var tList = el.children.tags("TABLE")

var i = 0

while ((i<tList.length) && (tList[i].tagName!="TABLE"))

i++

if (i==tList.length)

return null

else

return tList[i]

}

function doMenuDown(el) {

if (el._childItem==null)

el._childItem = getChildren(el)

if ((el._childItem!=null) && (el.className!="disabled") && (el.className!="disabledhighlight")) {

// Performance Optimization - Cache child element

ch = el._childItem

if (ch.style.display=="block") {

removeHighlight(ch.active)

return

}

ch.style.display = "block"

if (el.className=="root") {

ch.style.pixelTop = el.offsetHeight + el.offsetTop + 2

ch.st

[1] [2] [3] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有