设为首页 - 加入收藏 北海站长网 (http://www.0779zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 系统 模式 数据 2018
当前位置: 首页 > 大三合皇 > 传媒 > 正文

jQuery+CSS 打造动态下滑菜单效果

发布时间:2018-10-11 20:20 所属栏目:[传媒] 来源:站长网
导读:烈火网(LieHuo.Net)教程 本文将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单。 jQuery 的write less, do more的特性可谓是家喻户晓,即使没有很丰富JS编程经验的人,也可以通过其提供的API很快学会如何使用,当然,如果您经验丰富,我还是建议您可以

  烈火网(LieHuo.Net)教程 本文将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单。jQuery的"write less, do more"的特性可谓是家喻户晓,即使没有很丰富JS编程经验的人,也可以通过其提供的API很快学会如何使用,当然,如果您经验丰富,我还是建议您可以理解jQuery各主要函数的实现原理,其他不说了,直接看看如何用它来实现菜单神奇的效果吧。

  演示地址:点我查看

jQuery+CSS 打造动态下滑菜单效果

  Step1 - HTML结构

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



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


Home

Home


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

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

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章