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 相关文章推荐
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
解决vue移动端适配问题
Dec 12 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
php单链表实现代码分享
2016/07/04 PHP
js特殊字符转义介绍
2013/11/05 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
Python上传package到Pypi(代码简单)
2016/02/06 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
会计电算化专业个人的自我评价
2013/11/24 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
技能比武方案
2014/05/21 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
先进个人事迹材料
2014/12/29 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python