js 单击式的下拉菜单效果实例


Posted in Javascript onAugust 13, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title>js 单击式的下拉菜单效果</title> 
<style> 
.div1 { width: 120px; height: 20px; line-height:20px; text-align:center; } 
.div2 {width: 120px; position:absolute; left:0; top:10px;visibility:hidden; } 
.div2 a{ display:block;} 
</style> 
</head> 
<body> 
<script language="JavaScript"> 
var zindex=100 
function dropit2(whichone){ 
if (window.themenu&&themenu.id!=whichone.id) 
themenu.style.visibility="hidden" 
themenu=whichone 
if (document.all){ 
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX 
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 
if (themenu.style.visibility=="hidden"){ 
themenu.style.visibility="visible" 
themenu.style.zIndex=zindex++} 
else{ 
hidemenu()}}} 
function dropit(e,whichone){ 
if (window.themenu&&themenu.id!=eval(whichone).id) 
themenu.visibility="hide" 
themenu=eval(whichone) 
if (themenu.visibility=="hide") 
themenu.visibility="show" 
else 
themenu.visibility="hide" 
themenu.zIndex++ 
themenu.left=e.pageX-e.layerX 
themenu.top=e.pageY-e.layerY+19 
return false} 
function hidemenu(whichone){ 
if (window.themenu) 
themenu.style.visibility="hidden"} 
function hidemenu2(){ 
themenu.visibility="hide"} 
if (document.all) 
document.onclick=hidemenu 
</script> 
<span class="div1" onClick="dropit2(dropmenu);event.cancelBubble=true;return false"> <a href="###" onClick="if(document.layers) return dropit(event, 'document.dropmenu')">[点击显示菜单]</a> </span> 
<div class="div2" id="dropmenu"> 
<a href="https://3water.com">三水点靠木</a> 
<a href="#">个性名字网</a> 
<a href="#">个性名字网</a> 
</div> 
</body> 
</html> </td>
   </tr>
 </table>
Javascript 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
JavaScript中string对象
Jun 12 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
jQuery实现大图轮播
Feb 13 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
vue 文件目录结构详解
Nov 24 Javascript
react 组件传值的三种方法
Jun 03 Javascript
让元素在网页中可拖动示例代码
Aug 13 #Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 #Javascript
JavaScript的Module模式编程深入分析
Aug 13 #Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 #Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 #Javascript
js setTimeout 参数传递使用介绍
Aug 13 #Javascript
js setTimeout 常见问题小结
Aug 13 #Javascript
You might like
类的另类用法--数据的封装
2006/10/09 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
用Python给文本创立向量空间模型的教程
2015/04/23 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python购物车程序简单代码
2018/04/18 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python支持多线程的爬虫实例
2019/12/21 Python
python如何爬取动态网站
2020/09/09 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
电钳专业个人求职信
2014/01/04 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
python中使用redis用法详解
2022/12/24 Redis