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 ajax BUG:object doesn't support this property or method
Jul 06 Javascript
js事件(Event)知识整理
Oct 11 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
Javascript的无new构建实例详解
May 15 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
JS实现横向轮播图(初级版)
Jun 24 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
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
Opacity.js
2007/01/22 Javascript
学习ExtJS fit布局使用说明
2009/10/08 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
js登录弹出层特效
2014/03/07 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
python脚本替换指定行实现步骤
2017/07/11 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
EJB的几种类型
2012/08/15 面试题
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
三下乡活动方案
2014/01/31 职场文书
员工考核管理制度
2014/02/02 职场文书
超市促销活动总结
2014/07/01 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
使用Ajax实现无刷新上传文件
2022/04/12 Javascript