文档章节

导航栏二级下拉菜单的js特效

lotozhou
 lotozhou
发布于 2015/11/30 15:08
字数 324
阅读 646
收藏 2

很多大型的网站的导航菜单栏会有二级菜单,那么刚开始的时候这些二级菜单是隐藏的,我们通过鼠标点击或者把鼠标放在上面就会让二级菜单显示,有些二级菜单会有一些动画效果,我们今天讲的是二级菜单从上面慢慢下滑并出来,以一个很平滑的方式出场,相比传统的直接出现更有交互性。

今天这里我主要说的是一个js特效,通过鼠标放在上面,让导航栏改变颜色,并且让二级菜单从上面缓慢平滑的出现,有一个效果,这个效果的实现其实也很简单,就是让二级菜单初始状态为全透明,我们通过js改变它的透明度和位置,从而让它实现,从无到有,从上面平滑出来的效果。

附上js代码:

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$("#Menu ul li").hover(function(){

var _this=$(this)

t=setTimeout(function(){

_this.addClass("active");//添加class=active

_this.find(".nav").animate({opacity:1,"top":"50px"},500);

},300);

//鼠标滑上去时

},function(){

clearTimeout(t);

//鼠标移开时

$(this).removeClass("active");

$(this).find(".nav").animate({opacity:0,"top":"0px"},500);

});

</script>


© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0
Metronic 后台管理模版 分析记录

Metronic 后台管理模版 分析记录 概述 Metronic是一个Metro风格的后台管理模版,效果是这样的,很Cool。 用到的css和js css框架 js 头部导航栏 body是css的page-header-fixed类。 头部定义c...

带我去火星
2015/03/06
3
0
如何实现网页滚动侦测以及顶端固定导航栏?

本人不太了解javascript, 但是准备设计一个看着顺眼的网页, 有顶部固定的导航栏和右边目录栏, 其中目录栏实现scrollspy(滚动侦测). 在参考了一些网页源码之后设计了一个简单的测试网页, 源码...

赵飞
2013/03/13
2.5K
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
10/29
0
0
用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动...

鉴客
2010/08/12
7.5K
1

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript 继承使用解析

继承,通俗地说,之前你写过一些类,这些类中有一些是而你现在要写的类的功能的子集或者基本相同,那么你不用完全重新写一个新的类,你可以把之前写的类拿过来使用.这样的一种代码重用过程就叫做继...

前端攻城小牛
9分钟前
0
0
深入解析JavaScript 原型继承

JavaScript 原型继承,学习js面向对象的朋友可以看看。十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 Object.prototype JavaScript是...

前端攻城老湿
11分钟前
0
0
2018阿里云双12——年末钜惠,低至2折

活动链接地址:https://m.aliyun.com/act/team1212/?params=N.JlJCGqQNL4

城市之雾
12分钟前
0
0
VMware前路难测,多个厂家群雄逐鹿

导读 以VMware为例,虚拟机巨头公布了第二财季报告所示,它第二财季收入同比增长13%,达到了21.7亿美元,而且该公司收入和每股收益均超出预期。 在人们高谈Salesforce、亚马逊等新兴云计算厂...

问题终结者
13分钟前
0
0
Vuex的初探与实战小结

1.概述 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同: 1.Vuex 的状态存储是响...

peakedness丶
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部