织梦导航条dropdown.js的改进(2013-7-10)
可以设置一个一直都显示的二级菜单，修复了没有二级菜单时鼠标移上去仍然显示上一个二级菜单的问题.支持一级菜单鼠标离开事件
html代码
<!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>我的网站</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link type="text/css" rel="stylesheet" href="http://www.188163.com/img/fnews/css/style.css" />
</head>
<body>
<div class="w1000">
<div class="w960">
<!--f1-->
<!-- 菜单 -->
<div id="menu" class="menus">
<ul>
<!-- class='navselect'根据此属性来判断需要默认显示的二级菜单，以便在织梦模板中通用 -->
<li class='navselect'><a href="/" rel='dropmenu1'>主 页</a></li>
<li><a href='/a/jinrongzixun/'>金融资讯</a></li>
<li><a href='/a/gerenjinrong/' rel='dropmenu2'>个人金融</a></li>
<li><a href='/a/qiyejinrong/' rel='dropmenu4'>企业金融</a></li>
<li><a href='/a/caijingpindao/' rel='dropmenu5'>财经频道</a></li>
<li><a href='/a/zhifujiesuan/' rel='dropmenu6'>支付结算</a></li>
<li><a href='/a/yewushenqingtongdao/' rel='dropmenu7'>业务申请</a></li>
<li><a href='/a/zhongyaogonggao/' >重要公告</a></li>
<li><a href='/a/xinyongka/' >信用卡</a></li>
</ul>
</div>
<div class="menus_bottom">
</div>
<!-- //二级子类下拉菜单 -->
<script type="text/javascript" src="dropdown.js"></script>
<ul id="dropmenu1" class="dropMenu">
<li><a href="/a/gerenjinrong/touzilicai/">首页列表</a> | </li>
</ul>
<ul id="dropmenu2" class="dropMenu">
<li><a href="/a/gerenjinrong/touzilicai/">投资理财</a> | </li>
<li><a href="/a/gerenjinrong/grdk/">个人贷款</a> | </li>
<li><a href="/a/gerenjinrong/gerenxiaofei/">个人消费贷款</a> | </li>
<li><a href="/a/gerenjinrong/xinyong/">信用贷款</a> | </li>
<li><a href="/a/gerenjinrong/qichedaikuan/">汽车贷款</a> | </li>
<li><a href="/a/gerenjinrong/yishoulou/">一手楼按揭</a> | </li>
<li><a href="/a/gerenjinrong/ershoulou/">二手楼按揭</a> | </li>
<li><a href="/a/gerenjinrong/grjy/">个人经营贷款</a> | </li>
</ul>
<ul id="dropmenu4" class="dropMenu">
<li><a href="/a/qiyejinrong/gongsirongzi/">公司融资</a> | </li>
<li><a href="/a/qiyejinrong/maoyirongzi/">贸易融资</a> | </li>
<li><a href="/a/qiyejinrong/gongsilicai/">公司理财</a> | </li>
<li><a href="/a/qiyejinrong/piaojuyewu/">票据业务</a> | </li>
<li><a href="/a/qiyejinrong/xiangmurongzi/">项目融资</a> | </li>
</ul>
<ul id="dropmenu5" class="dropMenu">
<li><a href="/a/caijingpindao/huangjin/">黄金</a> | </li>
<li><a href="/a/caijingpindao/zhaiquan/">债券</a> | </li>
<li><a href="/a/caijingpindao/waihui/">外汇</a> | </li>
<li><a href="/a/caijingpindao/jijin/">基金</a> | </li>
</ul>
<ul id="dropmenu6" class="dropMenu">
<li><a href="/a/zhifujiesuan/pos/">P0S支付</a> | </li>
</ul>
<ul id="dropmenu7" class="dropMenu">
<li><a href="/a/yewushenqingtongdao/gerenyewu/">个人业务咨询</a> | </li>
<li><a href="/a/yewushenqingtongdao/gongsiyewu/">公司业务咨询</a> | </li>
</ul>
<ul id="dropmenu8" class="dropMenu">
</ul>
<ul id="dropmenu3" class="dropMenu">
</ul>
<script type="text/javascript"> cssdropdown.startchrome("menu")</script>
</div> </div>
<!--1000 end -->
</body>
</html>
dropdown.js
var cssdropdown = {
disappeardelay: 250,
disablemenuclick: false,
enableswipe: 1,
enableiframeshim: 1,
dropmenuobj: null,
ie: document.all,
firefox: document.getElementById && !document.all,
swipetimer: undefined,
bottomclip: 0,
getposOffset: function(what, offsettype) {
var totaloffset = (offsettype == "left") ? what.offsetLeft: what.offsetTop;
var parentEl = what.offsetParent;
while (parentEl != null) {
totaloffset = (offsettype == "left") ? totaloffset + parentEl.offsetLeft: totaloffset + parentEl.offsetTop;
parentEl = parentEl.offsetParent;
}
return totaloffset;
},
swipeeffect: function() {
if (this.bottomclip < parseInt(this.dropmenuobj.offsetHeight)) {
this.bottomclip += 10 + (this.bottomclip / 10);
this.dropmenuobj.style.clip = "rect(0 auto " + this.bottomclip + "px 0)";
} else return;
this.swipetimer = setTimeout("cssdropdown.swipeeffect()", 10);
},
//隐藏或者显示二级菜单
showhide: function(obj, e) {
if (this.ie || this.firefox) this.dropmenuobj.style.left = this.dropmenuobj.style.top = "-500px";
if (e.type == "click" && obj.visibility == hidden || e.type == "mouseover") {
if (this.enableswipe == 1) {
if (typeof this.swipetimer != "undefined") clearTimeout(this.swipetimer);
obj.clip = "rect(0 auto 0 0)";
this.bottomclip = 0;
this.swipeeffect();
}
obj.visibility = "visible";
} else if (e.type == "click") obj.visibility = "hidden";
},
iecompattest: function() {
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement: document.body;
},
clearbrowseredge: function(obj, whichedge) {
var edgeoffset = 0;
if (whichedge == "rightedge") {
var windowedge = this.ie && !window.opera ? this.iecompattest().scrollLeft + this.iecompattest().clientWidth - 15 : window.pageXOffset + window.innerWidth - 15;
this.dropmenuobj.contentmeasure = this.dropmenuobj.offsetWidth;
if (windowedge - this.dropmenuobj.x < this.dropmenuobj.contentmeasure) edgeoffset = this.dropmenuobj.contentmeasure - obj.offsetWidth;
} else {
var topedge = this.ie && !window.opera ? this.iecompattest().scrollTop: window.pageYOffset;
var windowedge = this.ie && !window.opera ? this.iecompattest().scrollTop + this.iecompattest().clientHeight - 15 : window.pageYOffset + window.innerHeight - 18;
this.dropmenuobj.contentmeasure = this.dropmenuobj.offsetHeight;
if (windowedge - this.dropmenuobj.y < this.dropmenuobj.contentmeasure) {
edgeoffset = this.dropmenuobj.contentmeasure + obj.offsetHeight;
if ((this.dropmenuobj.y - topedge) < this.dropmenuobj.contentmeasure) edgeoffset = this.dropmenuobj.y + obj.offsetHeight - topedge;
}
}
return edgeoffset;
},
//鼠标移动到一级菜单上执行
dropit: function(obj, e, dropmenuID) {
//隐藏上次显示的二级菜单
if (this.dropmenuobj != null) this.dropmenuobj.style.visibility = "hidden";
this.clearhidemenu();
if (this.ie || this.firefox) {
var me = this;
//一级菜单鼠标离开事件
obj.onmouseout = function() {
cssdropdown.delayhidemenu();
};
//一级菜单鼠标点击事件
obj.onclick = function() {
return ! cssdropdown.disablemenuclick
};
if (!dropmenuID) {
return;
}
this.dropmenuobj = document.getElementById(dropmenuID);
if (!this.dropmenuobj) return;
//为二级菜单绑定鼠标移动到事件
this.dropmenuobj.onmouseover = function() {
//移除从一级菜单离开时触发的方法，防止误执行
cssdropdown.clearhidemenu();
}
//为二级菜单绑定鼠标离开事件
this.dropmenuobj.onmouseout = function(e) {
cssdropdown.dynamichide(e);
}
//为二级菜单绑定鼠标点击事件
this.dropmenuobj.onclick = function() {
cssdropdown.delayhidemenu();
}
this.showhide(this.dropmenuobj.style, e);
//调整二级菜单位置，以免位置错乱
this.dropmenuobj.x = this.getposOffset(obj, "left");
this.dropmenuobj.y = this.getposOffset(obj, "top");
this.dropmenuobj.style.left = this.dropmenuobj.x - this.clearbrowseredge(obj, "rightedge") + "px";
this.dropmenuobj.style.top = this.dropmenuobj.y - this.clearbrowseredge(obj, "bottomedge") + obj.offsetHeight + 1 + "px";
this.positionshim();
}
},
positionshim: function() {
if (this.enableiframeshim && typeof this.shimobject != "undefined") {
if (this.dropmenuobj.style.visibility == "visible") {
this.shimobject.style.width = this.dropmenuobj.offsetWidth + "px";
this.shimobject.style.height = this.dropmenuobj.offsetHeight + "px";
this.shimobject.style.left = this.dropmenuobj.style.left;
this.shimobject.style.top = this.dropmenuobj.style.top;
}
this.shimobject.style.display = (this.dropmenuobj.style.visibility == "visible") ? "block": "none";
}
},
hideshim: function() {
if (this.enableiframeshim && typeof this.shimobject != "undefined") this.shimobject.style.display = 'none';
},
contains_firefox: function(a, b) {
while (b.parentNode) if ((b = b.parentNode) == a) return true;
return false;
},
//隐藏二级菜单，兼容性处理
dynamichide: function(e) {
var evtobj = window.event ? window.event: e;
//确认是鼠标离开事件，避免误触发
if (this.ie && !this.dropmenuobj.contains(evtobj.toElement)) this.delayhidemenu();
else if (this.firefox && e.currentTarget != evtobj.relatedTarget && !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget)) this.delayhidemenu();
},
//鼠标点击菜单，或者离开菜单时执行
delayhidemenu: function() {
this.delayhide = setTimeout(function() {
cssdropdown.dropmenuobj.style.visibility = 'hidden';
cssdropdown.hideshim();
cssdropdown.showAlways();
},
this.disappeardelay);
},
//移除定时方法
clearhidemenu: function() {
if (this.delayhide != "undefined") clearTimeout(this.delayhide);
},
//显示默认被选中的一级菜单
showAlways: function() {
if (this.always) {
this.always.onmouseover({
type: "mouseover"
});
}
},
//初始化
startchrome: function() {
for (var ids = 0; ids < arguments.length; ids++) {
var menuitems = document.getElementById(arguments[ids]).getElementsByTagName("a");
for (var i = 0; i < menuitems.length; i++) {
var relvalue = menuitems[i].getAttribute("rel");
//绑定鼠标移动到事件
menuitems[i].onmouseover = function(e) {
var event = typeof e != "undefined" ? e: window.event;
cssdropdown.dropit(this, event, this.getAttribute("rel"));
};
//显示默认被选中的一级菜单
if (!this.always && menuitems[i].parentNode.getAttribute("class") == "navselect") {
this.always = menuitems[i];
this.showAlways();
}
}
}
if (window.createPopup && !window.XmlHttpRequest) {
document.write('<IFRAME id="iframeshim" src="" style="display: none; left: 0; top: 0; z-index: 90; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>');
this.shimobject = document.getElementById("iframeshim");
}
}
}
演示地址：http://www.188163.com（我不知道啥时候失效...）
织梦导航条dropdown.js的改进(2013-7-10)的更多相关文章
- dedecms织梦导航栏二级菜单的实现方法
dede导航下拉菜单,一级栏目增加二级下拉菜单 使用dedecms5.6——5.7 将这段代码贴到templets\default\head.htm文件里<!-- //二级子类下拉菜单,考虑 ...
- 织梦导航 currentstyle 点击li添加class类 样式
<!--导航开始--> <div class="global_nav_wrap"> <ul class="nav nav-pills&quo ...
- 一个日期Js文件。 2013年10月12日 星期六 癸巳年九月初八
1.简单用法 <div align="center"> <SCRIPT language=JavaScript src="js/calendar.js ...
- 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
- 织梦CMS被挂马特征汇总
一.织梦CMS被挂马特征汇总 2013织梦CMS被挂马特征汇总.最近很多朋友反应后台多了几个系统管理员用户:service.spider等,而且自己之前的管理员用户登陆时候会提示用户名不存在.还有朋友 ...
- 织梦DedeCMS v5.7 实现导航条下拉菜单
首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...
- 织梦DedeCms去掉栏目页面包屑导航最后的分隔符“>”
织梦DedeCms的面包屑导航调用标签{dede:field name=’position’ /},在栏目页里调用的面包屑导航,最后会出现分割符号“>”,如:主页 > DedeCms 模板 ...
- CSS3+Js制作的一款响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...
- DEDECMS织梦列表页每隔N行文章添加一条分隔线
这是给一个朋友做模板的时候,用到的一个小小的技巧,今天正好用上了,以前看到有人问过不知道解决没有,今天整理了一下,本想保存在自己的电脑里,后来一想,不如咱们一起共享一下,也是对织梦的感恩,有好东西就来 ...
随机推荐
- springmvc和encache集成
虽然目前已经出了 ehcache3.x 了,但是,结合我搜索到的资料,我依旧只能先采用 ehcache2.x 来使用了 首先,在pom 中引入jar <dependency> <gr ...
- Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素，如果没有匹配的元素则返回null。
文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null. querySelector()方法接受一个CSS查询并返回匹配模式的第 ...
- java新手的session初体验
众所周知,session作为保存我们用户对话所需要的信息的对象,在我们的项目中必不可少.作为菜鸟学习java的第一课就是了解它的思想和用法,在以后的学习中,逐渐学习和总结,从基础到高级,慢慢学会应用. ...
- VCL 中的 Windows API 函数(4): AdjustWindowRectEx
AdjustWindowRectEx 用在了 Forms.DBCtrls 单元. AdjustWindowRectEx 可以根据窗口样式获取的边缘尺寸. 测试: var R: TRect; beg ...
- 图解HTTP学习笔记——简单的HTTP协议
简单的HTTP协议 前言 最近在学习Web开发的相关知识,发现<图解HTTP>这本书通俗易懂.所以花时间学习这本书,并记录下学习笔记. 如上图,我们每天都在浏览网页,一般我们都是在浏览器地 ...
- json字符串使用注意问题
json本身是字符串,即 json字符串 js使用 要把 json字符串 转为 javascript对象 json字符串转为js对象的方法:jquery的parseJSON var str='[{& ...
- 5 JInja2模版（适用于Django和Flask）
模版 在生产环节下,我们要把后端程序(其实就是python)计算出来的数据和html页面结合起来做,这个时候模版就派上大用处了. Flask下的模版---Jinja2 Jinja是日本寺庙的意思,并且 ...
- Java多线程-两种常用的线程计数器CountDownLatch和循环屏障CyclicBarrier
Java多线程编程-(1)-线程安全和锁Synchronized概念 Java多线程编程-(2)-可重入锁以及Synchronized的其他基本特性 Java多线程编程-(3)-从一个错误的双重校验锁 ...
- linux环境中,如何使用tar来创建压缩包?解压缩?
需求说明: 今天需要将一个tomcat目录打成压缩包,使用zip感觉有点慢,所以就想用tar来试试,之前一直使用tar的解压缩命令, 今天试试tar的压缩命令 操作过程: 1.通过tar的zcf选项进 ...
- JS有趣的单线程
一.JS的执行特点 源于单线程的特性, JS在一段时间内只能执行一部分代码, 那么, 当有多块代码需要执行时, 就需要排队等候了. 二.单线程与异步事件 (1) 什么是异步事件? 异 ...