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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
vue页面更新patch的实现示例
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和ACCESS写聊天室(二)
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
NumPy 如何生成多维数组的方法
2018/02/05 Python
查看Django和flask版本的方法
2018/05/14 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
大学考试作弊检讨书
2014/01/30 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
学生逃课检讨书
2015/02/17 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
Rust中的Struct使用示例详解
2022/08/14 Javascript