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

jQuery的"write less, do more"的特性可谓是家喻户晓，即使没有很丰富JS编程经验的人，也可以通过其提供的API很快学会如何使用，当然，如果您经验丰富，我还是建议您可以理解jQuery各主要函数的实现原理，其他不说了，直接看看如何用它来实现菜单神奇的效果吧。 [img]http://files.jb51.net/upload/2010-4/20100415214028204.gif[/img] [b]Step1 - HTML结构 [/b]　　看一下菜单的HTML代码，跟平常的菜单代码没有什么区别：

[url=javascript:;]<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的结构，使得每个锚点代码变成如下：

[u]复制代码[/u][/url] 代码如下:

　　原先的每个锚点中的内容会被附加到两个span元素（.out和.over）里面，另外一个span元素（.bg）为背景图片层。　　至于如何修改DOM结构，JS代码将在Step3中讲解。 [b]Step2 - CSS样式[/b] 　　在示例中，展示了两种样式，有使用背景图的和没有使用背景图的（具体查看演示），您也可以自由定制自己的样式，以设计出更炫酷的菜单，这里提供基本的样式和解释：

[url=http://demo.jb51.net/js/animated-menu/demo.html]查看最终效果[/url] 　[url=http://www.1sucai.cn/jiaoben/25841.html]jOuery 动态下滑菜单打包下载[/url] [b]PS：本文由[url=http://www.cnblogs.com/wiky/]维奇[/url]总结[/b]

全部评论(0)

上一篇：取消选中单选框radio的三种方式示例介绍
下一篇：使用jQuery实现验证上传图片的格式与大小