Js点击弹出下拉菜单效果实例


Posted in Javascript onAugust 12, 2013
<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="https://3water.com">三水点靠木</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>
Javascript 相关文章推荐
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
页面使用密码保护代码
Apr 10 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 #Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 #Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 #Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 #Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 #Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 #Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 #Javascript
You might like
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
js同源策略详解
2015/05/21 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
python传递参数方式小结
2015/04/17 Python
python引用DLL文件的方法
2015/05/11 Python
Python中for循环控制语句用法实例
2015/06/02 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
八年级语文教学反思
2014/02/11 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
信访稳定工作汇报
2014/10/27 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技