| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 6582 人关注过本帖
标题:js特效:下拉菜单
只看楼主 加入收藏
小笨笨
Rank: 5Rank: 5
等 级:贵宾
威 望:19
帖 子:1169
专家分:0
注 册:2006-4-17
收藏
 问题点数:0 回复次数:25 
js特效:下拉菜单

<HTML>
<SCRIPT LANGUAGE="JavaScript" >
var IsDroped =false;
function mouseout()
{
   window.event.srcElement.style.color = 'white';//鼠标移开时置为白色
}

function mouseover()
{
   window.event.srcElement.style.color = 'red';//鼠标进入时置为红色//鼠标进入时置为红色
}

function doMenu(MenuID)
{
   var CurMenu = document.all(MenuID);
   //为避免闪烁,如果下拉菜单已经显示则不重画.
   if (IsDroped==true)
   {
   window.event.cancelBubble = true;
   return false;
   }
   window.event.cancelBubble = true;
   TempMenu = CurMenu;

   //计算下拉菜单的位置
   x = window.event.srcElement.offsetLeft + window.event.srcElement.offsetParent.offsetLeft;
   x2 = x + window.event.srcElement.offsetWidth;
   y = pad.offsetHeight;
   CurMenu.style.top = y;
   CurMenu.style.left = x;
   CurMenu.style.clip = "rect(0 0 0 0)";
   CurMenu.style.display = "block";

   //延时2毫秒后再显示菜单,保证ToolbarMenu.offsetHeight有值,避免从主菜单移向下拉菜单时下拉菜单消失.
   window.setTimeout("showMenu()", 2);
   return true;
}

function showMenu()
{
   y2 = y + TempMenu.offsetHeight;
   TempMenu.style.clip = "rect(auto auto auto auto)";
   IsDroped =true;//下拉菜单已经显示
}

function hideMenu()
{
   //如果在下拉菜单的范围之内移动则不隐藏.
   cY = event.clientY + document.body.scrollTop;
   if (cY>=y && cY<y2 && event.clientX >= (x+5) && event.clientX <= x2 ||
   cY>1 && cY<y && event.clientX >= (x+5) && event.clientX <= x2-10)
   { window.event.cancelBubble = true; return;}

   //隐藏
   TempMenu.style.display = "none";
   window.event.cancelBubble = true;
   IsDroped =false;

}
</SCRIPT>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<DIV ID='menu' STYLE='position:absolute;background-color:white;width:100%;top:0;left:0;'>
<DIV ID='pad' STYLE='position:relative;height:20;width:100%;font:bold 11pt 宋体;background-color:#007FFF;color:white;'>
<A TARGET='_top' TITLE='' ID='pad1' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad1');">菜单项一</A>
<SPAN style="color:white"></SPAN>
<A TARGET='_top' TITLE='' ID='pad2' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad2');" onclick="window.event.returnValue=false;">菜单项二</A>
</DIV>
</DIV>
<SPAN ID='idpad1' STYLE='display:none;position:absolute;width:70;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;' onmouseout='hideMenu();'>
<HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>
<DIV STYLE='position:relative;left:0;top:8;'>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white' HREF='11.htm' TARGET='_top' onmouseout="mouseout();" onmouseover="mouseover()">子菜单项</A><BR>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white' HREF='12.htm' TARGET='_top' onmouseout="mouseout();" onmouseover="mouseover()">子菜单项</A><BR>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white' HREF='13.htm' TARGET='_top' onmouseout="mouseout();" onmouseover="mouseover()">子菜单项</A>
</DIV>
</SPAN>
<SPAN ID='idpad2' STYLE='display:none;position:absolute;width:70;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;' onmouseout='hideMenu();'>
<HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>
<DIV STYLE='position:relative;left:0;top:8;'>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white' HREF='21.htm' TARGET='_top' onmouseout="mouseout();" onmouseover="mouseover()">子菜单项</A><BR>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white' HREF='22.htm' TARGET='_top' onmouseout="mouseout();" onmouseover="mouseover()">子菜单项</A><BR>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white' HREF='23.htm' TARGET='_top' onmouseout="mouseout();" onmouseover="mouseover()">子菜单项</A><BR>
<HR STYLE='color:white' SIZE=1><!--分隔行-->
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white' onclick="parent.close()" onmouseout="mouseout();" onmouseover="mouseover()">退出系统</A>
</DIV>
</SPAN>
</BODY>
</HTML>

搜索更多相关主题的帖子: 特效 菜单 
2006-06-01 08:48
小星
Rank: 1
等 级:新手上路
帖 子:65
专家分:0
注 册:2005-4-14
收藏
得分:0 
不错,换个颜色我就更喜欢了阿

2006-06-01 22:45
小笨笨
Rank: 5Rank: 5
等 级:贵宾
威 望:19
帖 子:1169
专家分:0
注 册:2006-4-17
收藏
得分:0 
颜色可以自己换的,这只是一个例子。

欢迎光临我的博客: http://smallfools.blog./default.html
2006-06-02 08:36
dreame
Rank: 3Rank: 3
等 级:新手上路
威 望:8
帖 子:521
专家分:0
注 册:2005-10-23
收藏
得分:0 
抛砖引玉之用

有时候真的想放弃寂寞的等待,但她是那么的可爱!I love u forever!
2006-06-02 13:05
water123456
Rank: 5Rank: 5
等 级:贵宾
威 望:15
帖 子:3208
专家分:5
注 册:2006-2-21
收藏
得分:0 

不错,可以用的,谢谢


让我们风风火火的过一生,别平平淡淡过一年。
2006-07-25 17:53
hangxj
Rank: 6Rank: 6
等 级:贵宾
威 望:29
帖 子:2045
专家分:0
注 册:2006-4-10
收藏
得分:0 
最近正好要用到,太感谢了

http://www./
2006-07-28 16:24
小悟空
Rank: 1
等 级:新手上路
帖 子:218
专家分:0
注 册:2005-5-14
收藏
得分:0 
不错,顶了~~~!!!

2006-07-31 12:23
lee_boy
Rank: 1
等 级:新手上路
帖 子:15
专家分:0
注 册:2006-7-9
收藏
得分:0 
这个子菜单是上下结构的有没有左右结构的?
2006-08-07 15:31
pulf
Rank: 1
等 级:新手上路
帖 子:78
专家分:0
注 册:2006-7-31
收藏
得分:0 
我也来学习一下。

2006-08-07 21:06
sunangel
Rank: 1
等 级:新手上路
帖 子:26
专家分:0
注 册:2006-8-14
收藏
得分:0 
看看..了。.学习以下

2006-08-22 22:29
快速回复:js特效:下拉菜单
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.018915 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved