Js点击弹出下拉菜单效果实例
Js点击弹出下拉菜单效果实例
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:.menu{BORDER-RIGHT:#0060802pxsolid;BORDER-TOP:#80e0ff2pxsolid...

复制代码 代码如下:

<STYLE type=text/css>

.menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #40a0c0 }

A.menuItem { BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 12px; BORDER-TOP: #000000 0px solid; DISPLAY: block; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: #000000 0px solid; CURSOR: default; COLOR: #ffffff; PADDING-TOP: 2px; BORDER-BOTTOM: #000000 0px solid; FONT-FAMILY: MS Sans Serif, Arial, Tahoma, sans-serif; TEXT-DECORATION: none }

A.menuItem:hover { COLOR: #ffff00; BACKGROUND-COLOR: #004060 }

</STYLE>

<DIV class=menu id=myMenu><A class=menuItem

href="http://www.jb51.net">查字典教程网</A> <A class=menuItem

href="http://www.baidu.com">百度</A> <A class=menuItem

href="">网 易</A> <A class=menuItem

href="">江苏音符</A> <A class=menuItem

href="">央视国际</A> </DIV>

<P><font>点击打开菜单</font></P>

<SCRIPT type=text/javascript>

document.getElementById("myMenu").onmouseout = closeMenu;

function openMenu(event, id) {

var el, x, y;

el = document.getElementById(id);

if (window.event) {

x = window.event.clientX + document.documentElement.scrollLeft

+ document.body.scrollLeft;

y = window.event.clientY + document.documentElement.scrollTop +

+ document.body.scrollTop;

}

else {

x = event.clientX + window.scrollX;

y = event.clientY + window.scrollY;

}

x -= 2; y -= 2;

el.style.left = x + "px";

el.style.top = y + "px";

el.style.visibility = "visible";

}

function closeMenu(event) {

var current, related;

if (window.event) {

current = this;

related = window.event.toElement;

}

else {

current = event.currentTarget;

related = event.relatedTarget;

}

if (current != related && !contains(current, related))

current.style.visibility = "hidden";

}

function contains(a, b) {

// Return true if node a contains node b.

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

</SCRIPT> </td>

</tr>

</table>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类