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 相关文章推荐
判断对象是否Window的实现代码
Jan 10 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
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实现异步调用方法研究与分享
2011/10/27 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
微信支付开发发货通知实例
2016/07/12 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
sublime text 3配置使用python操作方法
2017/06/11 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
中学教师实习自我鉴定
2013/09/28 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
法语专业求职信
2014/07/20 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
会计工作总结范文2014
2014/12/23 职场文书
计划生育责任书
2015/05/09 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书