项目中的菜单问题，今天和同事研究了一下午没解决，请大家帮忙给看看，谢谢！

morris_lz 2004-09-24 10:29:13
代码如下：

<html>
<head>
<style>
BODY
{
}
.menuBar
{
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center;
}
.Bar
{
BORDER-RIGHT: blue 0px outset;
BORDER-TOP: blue 0px outset;
FLOAT: left;
BORDER-LEFT: blue 0px outset;
CURSOR: hand;
TEXT-INDENT: 12px;
BORDER-BOTTOM: blue 0px outset;
POSITION: relative;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: left;
font-size:12px;
}
.menu
{
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
WIDTH:100px;
LINE-HEIGHT: 140%;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: #ffffff;
font-size:12px;
}
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
}
.ItemMouseOver
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
COLOR: highlighttext;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: highlight;
font-size:12px;
}
.ItemMouseOut
{
WIDTH: 100%;
}
.Arrow
{
FLOAT: right;
FONT-FAMILY: Webdings;
POSITION: absolute;
TEXT-ALIGN: left
}
.barOver
{
BORDER-RIGHT: blue 0px ridge;
BORDER-TOP: blue 0px ridge;
FLOAT: left;
BORDER-LEFT: blue 0px ridge;
CURSOR: hand;
BORDER-BOTTOM: blue 0px ridge;
POSITION: relative;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;
font-size:12px;
margin-left:12px;
}
</style>
<script>
function InitMenu()
{
var bar = menuBar.children

for(var i=0;i < bar.length;i++)
{
var menu=eval(bar[i].menu)
menu.style.visibility = "hidden"
bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id)

if(menuItem.menu != null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
//var tmp = eval(menuItem.id+"_Arrow")
// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}

}
}
function FindSubMenu(subMenu)
{
var menu=eval(subMenu)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = "hidden"
var menuItem = eval(Items[j].id)


if(menuItem.menu!= null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
// var tmp = eval(menuItem.id+"_Arrow")
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)
}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}
}
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
bar.className="barOver"
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
}

function highlight(obj)
{
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{ var Elements = PElement.children
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements[i].id)
TE.className = "menuItem"
}
}
obj.className="ItemMouseOver"
window.defaultStatus = obj.title
ShowSubMenu(obj)
}

function Do(obj)
{
var cmd = eval(obj).cmd
window.navigate(cmd)

}

function HideMenu(obj)
{
if(obj.hasChildNodes()==true)
{
var child = obj.children

for(var j =0;j<child.length;j++)
{
if (child[j].className=="barOver")
{var bar = eval(child[j].id)
bar.className="Bar"}

if(child[j].menu != null)
{
var childMenu = eval(child[j].menu)
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu)

childMenu.style.visibility = "hidden"
}
}

}
}
function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id)
HideMenu(PMenu)
if(obj.menu != null)
{
var menu = eval(obj.menu)
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}
</script>

</head>

...全文
172 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
Jorger 2004-09-26
  • 打赏
  • 举报
 回复
你都没有onmouseout事件，加一个，把相应的menu层none掉就ok了
morris_lz 2004-09-26
  • 打赏
  • 举报
 回复
高手们，帮帮忙啊
morris_lz 2004-09-26
  • 打赏
  • 举报
 回复
谢谢大家的热心帮助，菜单位置的问题已经得到解决了，还有就是上面朋友说的onmouseout时菜单不自动消失的问题，还得麻烦大家一下，今天加班到现在都大半夜了，还是没有解决，麻烦诸位再给看看，万分感谢！谢谢大家！
morris_lz 2004-09-26
  • 打赏
  • 举报
 回复
谢谢大家的热心帮助，菜单位置的问题已经得到解决了，还有就是上面朋友说的onmouseout时菜单不自动消失的问题，还得麻烦大家一下，今天加班到现在都大半夜了，还是没有解决，麻烦诸位再给看看，万分感谢！谢谢大家！
morris_lz 2004-09-26
  • 打赏
  • 举报
 回复
谢谢大家的热心帮助，菜单位置的问题已经得到解决了，还有就是上面朋友说的onmouseout时菜单不自动消失的问题，还得麻烦大家一下，今天加班到现在都大半夜了，还是没有解决，麻烦诸位再给看看，万分感谢！谢谢大家！
morris_lz 2004-09-26
  • 打赏
  • 举报
 回复
上面的朋友你好，我尝试过了但是因为水平有限没有做出来，所以请大家多帮助一下
xjdawu 2004-09-25
  • 打赏
  • 举报
 回复
另：既然所有的次级菜单所在的层都是绝对定位,就不要放在table里面以免影响整体的格式
xjdawu 2004-09-25
  • 打赏
  • 举报
 回复
.Bar
{
BORDER-RIGHT: blue 0px outset;
BORDER-TOP: blue 0px outset;
BORDER-LEFT: blue 0px outset;
BORDER-BOTTOM: blue 0px outset;
BACKGROUND-COLOR: #ffffff;
font-size:12px;
CURSOR: hand;

POSITION: relative;
FLOAT: left;
TEXT-ALIGN: left;
}
.barOver
{
BORDER-RIGHT: blue 0px ridge;
BORDER-TOP: blue 0px ridge;
BORDER-LEFT: blue 0px ridge;
BORDER-BOTTOM: blue 0px ridge;
BACKGROUND-COLOR: #ffffff;
font-size:12px;
CURSOR: hand;

POSITION: relative;
FLOAT: left;
TEXT-ALIGN: left;
}
ouyld 2004-09-25
  • 打赏
  • 举报
 回复
顶
zltostem 2004-09-25
  • 打赏
  • 举报
 回复
barOver

定义的有问题

？
mrshelly 2004-09-25
  • 打赏
  • 举报
 回复
或者把
BarOver CSS里的

margin-left:12px; 去掉~~~~
mrshelly 2004-09-25
  • 打赏
  • 举报
 回复
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
// bar.className="barOver"
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
}

把上面的那行注释掉~~~~~~~~
ebbc 2004-09-25
  • 打赏
  • 举报
 回复
你这个还有个问题，就是鼠标放在出现的子菜单的时候，移开鼠标，那子菜单不消失。
panzi667 2004-09-25
  • 打赏
  • 举报
 回复
呵呵，我现在在网吧
「已注销」 2004-09-25
  • 打赏
  • 举报
 回复
你想实现什么样的效果呀？

我以前用JAVASCIPT写过一个脚本，能达到树状菜单的效果。
meilian01 2004-09-25
  • 打赏
  • 举报
 回复
我不知道，只能帮你UP :D
morris_lz 2004-09-24
  • 打赏
  • 举报
 回复
大家帮帮忙啊
morris_lz 2004-09-24
  • 打赏
  • 举报
 回复
csdn提示我帖子太长了，所以我只能分两次给出了，麻烦大家了！
morris_lz 2004-09-24
  • 打赏
  • 举报
 回复
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy">

<table width="460" border="0" align="right" cellpadding="0" cellspacing="0" >
<tr>
<td>

<DIV Id="menuBar" class="menuBar">
<DIV Id="Bar2" class="Bar" menu="menu1"><img src="" width="1" height="11"> 首页</DIV>
<DIV Id="Bar3" class="Bar" menu="menu2"><img src="../images/index_2_05.gif" width="1" height="11"> 个人金融服务</DIV>
<DIV Id="Bar4" class="Bar" menu="menu3"><img src="../images/index_2_05.gif" width="1" height="11"> 企业金融服务</DIV>
<DIV Id="Bar5" class="Bar" menu="menu4"><img src="../images/index_2_05.gif" width="1" height="11"> 资金及国际业务</DIV>
<DIV Id="Bar1" class="Bar" menu="menu0"><img src="../images/index_2_05.gif" width="1" height="11"> 客户交流</DIV>
</DIV>
<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem">SubMenu #1</div>
<div Id="menuItem1_2" class="menuItem">SubMenu #2</div>
<div Id="menuItem1_3" class="menuItem">SubMenu #3</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem">Page #1</div>
<div Id="menuItem2_2" class="menuItem">Page #2</div>
<div Id="menuItem2_3" class="menuItem">Page #3</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem">Page #1</div>
<div Id="menuItem3_2" class="menuItem">Page #2</div>
<div Id="menuItem3_3" class="menuItem">Page #3</div>
<div Id="menuItem3_4" class="menuItem">SubMenu #4</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem">Page #1</div>
<div Id="menuItem4_2" class="menuItem">Page #2</div>
<div Id="menuItem4_3" class="menuItem">Page #3</div>
<div Id="menuItem4_4" class="menuItem">Page #4</div>
</div>
<div id="menu0" class="menu">
<div Id="menuItem6_1" class="menuItem">Page #1-1</div>
<div Id="menuItem6_2" class="menuItem">Page #1-2</div>
<div Id="menuItem6_3" class="menuItem">SubMenu #1-1</div>
</div>

</td>
</tr>
</table>

</body>
</html>


已经改了很多个地方了，可就是有一个地方总是得不到解决，就是当鼠标移动到首页的时候会跳一下，麻烦大家给解决解决，谢谢你们！
兼容各浏览器的省市二级联动菜单
接到同事求助，说有一个二级联动的省市下拉菜单在safari中不能用了，让我帮忙。我看了下，决定改用JQuery。很快完事儿，同事正高兴的呢，我发现IE里面又用不成了，是在是郁闷啊！研究了很久，发现是IE中转化xml的...
微信重定向地址参数被拦截
这个问题折腾了我和该项目的后台同事好久，记录一下 正常流程： 图书馆公众号挂的我们项目的H5链接，公众号菜单点击后先经过后台，后台拿到相关参数跳转到我的页面地址把参数带过来，我获取到参数和用户登录填写的...
还分不清APS、MES与ERP的区别？漫画+故事来帮忙！
一天中午，丈夫在外给家里打电话：“亲爱的老婆，晚上想带几个同事回家吃饭可以吗？”（订货意向） 丈夫：“6个人，我们7点左右回来，准备些酒 烤鸭番茄炒蛋 凉菜 蛋花汤。。。。。。，你看可以吗？”（商务沟通...
《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(2)-初识Fiddler让你理性认识一下
今天的理性认识主要就是讲解和分享Fiddler的一些理论基础知识。...前端开发同事在调试解决bug时，也找你过来帮忙造几个数据，于是你辛辛苦苦造了个数据，他点一下，数据用完了，bug没解决。于是乎又找你造数据。
一个故事告诉你什么是ERP
一天中午，丈夫在外给家里打电话："亲爱的老婆，晚上我想带几个同事回家吃饭可以吗？"(订货意向) 　妻子："当然可以，来几个人，几点来，想吃什么菜？" 　丈夫："6个人，我们7点左右回来，准备些酒、烤鸭、番茄炒蛋...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章