jQuery 打造动态下滑菜单实现说明


Posted in Javascript onApril 15, 2010

jQuery的"write less, do more"的特性可谓是家喻户晓,即使没有很丰富JS编程经验的人,也可以通过其提供的API很快学会如何使用,当然,如果您经验丰富,我还是建议您可以理解jQuery各主要函数的实现原理,其他不说了,直接看看如何用它来实现菜单神奇的效果吧。
jQuery 打造动态下滑菜单实现说明
Step1 - HTML结构

看一下菜单的HTML代码,跟平常的菜单代码没有什么区别:

<div id="menu" class="menu"> 
<ul> 
<li><a href="javascript:;">Home</a></li> 
<li><a href="javascript:;">HTML/CSS</a></li> 
<li><a href="javascript:;">JavaScript</a></li> 
<li><a href="javascript:;">Resources</a></li> 
<li><a href="javascript:;">Tutorials</a></li> 
<li><a href="javascript:;">About</a></li> 
</ul> 
</div>

关键在于利用脚本在每个锚点(a元素)中建立几个分隔层,这样就可以在鼠标悬停时分别控制它们产生动画。为此,我们要在DOM加载完成时候修改DOM的结构,使得每个锚点代码变成如下:

<a href="javascript:;"> 
<span class="out">Home</span> 
<span class="bg"></span> 
<span class="over">Home</span> 
</a>

原先的每个锚点中的内容会被附加到两个span元素(.out和.over)里面,另外一个span元素(.bg)为背景图片层。

至于如何修改DOM结构,JS代码将在Step3中讲解。
Step2 - CSS样式

在示例中,展示了两种样式,有使用背景图的和没有使用背景图的(具体查看演示),您也可以自由定制自己的样式,以设计出更炫酷的菜单,这里提供基本的样式和解释:

/* 以下是菜单基本的样式 */ 
.menu ul li { 
float: left; 
/* 菜单子元素的内容超出不可见 */ 
overflow: hidden; 
/* 以下省略部分代码 */ 
} 
.menu ul li a { 
/* 必须是相对定位 */ 
position: relative; 
display: block; 
width: 110px; 
/* 以下省略部分代码 */ 
} 
.menu ul li a span { 
/* 所有层将使用绝对定位 */ 
position: absolute; 
left: 0; 
width: 110px; 
} 
.menu ul li a span.out { 
top: 0px; 
} 
.menu ul li a span.over, 
.menu ul li a span.bg { 
/* 起初.over层和.bg层相对a元素-45px以达到隐藏的效果 */ 
top: -45px; 
} 
/* 以下是使用背景图的示例 */ 
#menu { 
/* 菜单背景 */ 
background:url(bg_menu.gif) scroll 0 -1px repeat-x; 
border:1px solid #CCC; 
} 
#menu ul li a { 
color: #000; 
} 
#menu ul li a span.over { 
color: #FFF; 
} 
#menu ul li span.bg { 

/* 指定高度和背景图 */ 
height: 45px; 
background: url(bg_over.gif) center center no-repeat; 
}

您也可以在自行定制CSS样式,这里还提供了简化版的样式(查看演示)
Step3 - JavaScript代码

首先要做的是,实现Step1中所说的,在DOM加载完成后修改其DOM结构,具体做法如下:

// 把每个a中的内容包含到一个层(span.out)中, 
// 然后再在span.out层后面追加背景图层(span.bg) 
$("#menu li a").wrapInner( '<span class="out"></span>' ) 



 .append( '<span class="bg"></span>' ); 
// 循环为菜单的a每个添加一个层(span.over) 
$("#menu li a").each(function() { 

$( '<span class="over">' + $(this).text() + '</span>' ) 




 .appendTo( this ); 
});

在讲动画代码之前,先看一下动画的过程,如下图所示:
jQuery 打造动态下滑菜单实现说明
在Step1中我们知道DOM加载后,a元素中建立了几个分隔层,在Step2中,CSS样式中,我们设置了span.bg和span.over层的top属性为-45px,因为span元素已设置为绝对定位,它将相对于li a 元素向上-45px,因为li元素内容超出不可见,所以开始时,.bg层和.over层位于空间范围外。

我们要设置的动画过程是,当鼠标悬停时,三个层同时向下移动,span.out层向下移动至移除可见范围,span.over和span.bg移动进入可见区域,设置span.bg速度比span.over速度稍快,错位产生更加效果。

要实现这样动画效果,使用jQuery的.animate()方法很容易就可以实现,以下是JS代码和解释:

$("#menu li a").hover(function() { 
// 鼠标悬停时候被触发的函数 
$(".out",this).stop().animate({'top':'45px'},250);//下滑至隐藏 
$(".over",this).stop().animate({'top':'0px'},250); //下滑至显示 
$(".bg",this).stop().animate({'top':'0px'},120); //下滑至显示 
}, function() { 
// 鼠标移出时候被触发的函数 
$(".out",this).stop().animate({'top':'0px'},250); //上滑至显示 
$(".over",this).stop().animate({'top':'-45px'},250);//上滑至隐藏 
$(".bg",this).stop().animate({'top':'-45px'},120);//上滑至隐藏 
});

总结

以上讲解了如何一步步打造jQuery动态下滑菜单,您可以按部就班自己实现一个,也可以下载源代码修改定制,当然,您有什么好的提议或者有什么问题,都可以给我留言。

 查看最终效果

 jOuery 动态下滑菜单打包下载

PS:本文由维奇总结

Javascript 相关文章推荐
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
xheditor与validate插件冲突的解决方案
Apr 15 #Javascript
js 获取Listbox选择的值的代码
Apr 15 #Javascript
JavaScript toFixed() 方法
Apr 15 #Javascript
js function定义函数使用心得
Apr 15 #Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 #Javascript
关于文本框的一些限制控制总结~~
Apr 15 #Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 #Javascript
You might like
PHP数据库开发知多少
2006/10/09 PHP
基于mysql的bbs设计(一)
2006/10/09 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
javascript常用函数(1)
2015/11/04 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
python编程使用协程并发的优缺点
2018/09/20 Python
详解Django 时间与时区设置问题
2019/07/23 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
关于运动会的稿件
2014/02/02 职场文书
目标责任书范文
2014/04/14 职场文书
安全生产月演讲稿
2014/05/09 职场文书
员工试用期自我评价
2014/09/18 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
信仰观后感
2015/06/03 职场文书