本文章来给各位同学介绍一款不错的 Js 点击弹出下拉菜单效果代码,这种效果有点像支付宝的下拉菜单,有需要了解的朋友可参考。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <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.phperz.com">
- phperz
- </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 onclick="openMenu(event, 'myMenu');return false;">
- 点击打开菜单
- </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>
来源: