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国旗变换效果代码
Aug 13 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
Node.js事件的正确使用方法
Apr 05 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 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
Oracle 常见问题解答
2006/10/09 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Python中List.index()方法的使用教程
2015/05/20 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
浅谈python标准库--functools.partial
2019/03/13 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
服务口号大全
2014/06/11 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技