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

2024-02-29 19:50:45

jQuery的"write less, do more"的特性可谓是家喻户晓，即使没有很丰富JS编程经验的人，也可以通过其提供的API很快学会如何使用，当然，如果您经验丰富，我还是建议您可以理解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的结构，使得每个锚点代码变成如下：

代码如下:

　　原先的每个锚点中的内容会被附加到两个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 );
});

在讲动画代码之前，先看一下动画的过程，如下图所示：

在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：本文由维奇总结

jquery插件之easing 动态菜单

很简单的一个效果插件,但不是经常用,怕忘了,以后在用又要去看文档,所以现在把笔记写下来,方便以后复制代码代码如下: <script> $(function(){ $.easing.def="easeInQuad";//设置默认效果 var callback=function (){ alert("ok"); } $("#t1").animate({ "top":600 },{duration: 3000, ea
jQuery实现可用于博客的动态滑动菜单

本文实例讲述了jQuery实现可用于博客的动态滑动菜单的方法.分享给大家供大家参考.具体如下: 复制代码代码如下: <!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/xhtm
jquery实现动态菜单的实例代码

jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多,都是采用JavaScript操作css的方式. 其具体步骤可以分为以下几步: •创建一个含有要表达的菜单的html页面复制代码代码如下: <html> <head> <title>jquery示例2:jquery菜单</title> <meta http-equiv="Content-Type" content="text/html; ch
jquery实现可横向和竖向展开的动态下滑菜单效果

本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果.分享给大家供大家参考.具体如下: 这里演示了两个下拉导航菜单的效果,用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现,最新的jquery版本也可以引入,在演示页面中,分别有横向水平向下滑出的下拉菜单,还有纵向垂直布局向右滑出的导航菜单,根据你的需要选择使用. 运行效果截图如下: 在线演示地址如下: http://
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015
jQuery实现响应鼠标背景变化的动态菜单效果代码

本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery响应鼠标背景变化的动态菜单,菜单的背景在鼠标放上后有所变化,这款菜单的实现主要是使用了图片,修改菜单的时候要修改图片,有些麻烦,不过效果不错,引入的jquery插件是1.7版本,高版本jQuery未测试,应该也可以啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-co
jQuery实现的背景动态变化导航菜单效果

本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code
jQuery实现的动态伸缩导航菜单实例

本文实例讲述了jQuery实现的动态伸缩导航菜单.分享给大家供大家参考.具体实现方法如下: <!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">&l
jquery实现鼠标滑过显示二级下拉菜单效果

本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>
jQuery 打造动态下滑菜单实现说明

jQuery的"write less, do more"的特性可谓是家喻户晓,即使没有很丰富JS编程经验的人,也可以通过其提供的API很快学会如何使用,当然,如果您经验丰富,我还是建议您可以理解jQuery各主要函数的实现原理,其他不说了,直接看看如何用它来实现菜单神奇的效果吧. Step1 - HTML结构看一下菜单的HTML代码,跟平常的菜单代码没有什么区别: 复制代码代码如下: <div id="menu" class="menu"
jQuery 打造动态渐变按钮详细图文教程

本教程分为以下三步: Step1 - Photoshop Step2 - HTML/CSS Step3 - JavaScript(jQuery) Step4 - CSS修改最终结果如下: Step1 - Photoshop 1. 新建文件按钮的尺寸是100px X 80px,但由于我们需要创建一个有两种状态的CSS sprite背景图,所以我们在Photoshop中创建(Ctrl+N)一个长宽为200px X 160px的图片文件,如下图: 2. 创建参考线为了使绘制按钮更容易,我们创建参
jQuery+CSS实现的网页二级下滑菜单效果

本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果和菜单下滑效果和渐变效果已经做出来了,在IE下表现不错,在火狐下发现菜单有闪烁现象,有空会继续修正,感谢大家捧场哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-web-2level-menu-style-codes/ 具体
jQuery实现向下滑出的二级菜单效果实例

本文实例讲述了jQuery实现向下滑出的二级菜单效果.分享给大家供大家参考.具体如下: 这里用jQuery实现向下滑出的二级菜单代码,滑出菜单,鼠标放在主菜单的任意一项上,就会向下滑出二级的子菜单.当然本代码只是一个演示,有些菜单是随便弄的,经过测试,兼容IE8.火狐和Chrome等浏览器,有兴趣的你可以自己试下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-down-show-2menu-style-codes/ 具体代码如下
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能

上面的人要hui admin 做页面,本人前端比较菜,这框架也没用过. 因为是动态添加数据 .表也没有,..然后子菜单列表只能通过字符串拼接的方式显示. (伪造的)数据是传过来了发现这个框架的点击菜单,子菜单滑出的效果触发不了,应该是封装了吧..反正不会引用.就自己写了个点击事件(,列表格式还是参照模板). ①:请求数据+ul拼接比较糙,两边icon 无力回天,不过功能是实现了 $.ajax({ url:'/type/reportType', data:{"token":getC
jQuery实现可用于博客的动态滑动菜单完整实例

本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//
jquery实现向下滑出的二级导航下滑菜单效果

本文实例讲述了jquery实现向下滑出的二级导航下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款由jQuery配合JavaScript来共同实现的网页上的下滑菜单特效,带颜色的是一级主菜单,点击后会展开向上滑出二级的子菜单,再次点击主菜单,会合拢子菜单,就菜单所能展现的功能来说,适用于企业网站产品分类.新闻类文章栏目导航等,目前本款菜单支持两级,有兴趣的可自己扩展更多级的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery
jQuery实现下滑菜单导航效果代码

本文实例讲述了jQuery实现下滑菜单导航效果代码.分享给大家供大家参考.具体如下: 这里演示jquery向下滑的导航菜单代码,黄色风格下滑菜单,可作为网站的主导航菜单,二级菜单向下滑出,兼容性也是很不错的,本菜单来源自网络,丢失原作者署名信息,请原作者看到后与我们联系署名. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html

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

相关推荐

随机推荐