文档章节

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

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

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

今天这里我主要说的是一个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
苏州
程序员
私信 提问
好程序员分享学web前端技术都需要掌握什么

好程序员分享学web前端技术都需要掌握什么,随着Web前端概念的普及,网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风,铺天盖地席卷而来,各种规模的IT企业都对自...

好程序员IT
06/17
31
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
7
0
《JavaScript实用效果整理》系列分享专栏

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

开元中国2015
2018/10/29
63
0
如何实现网页滚动侦测以及顶端固定导航栏?

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

赵飞
2013/03/13
2.6K
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 文件类操作API与IO编程基础知识

阅读目录: https://www.w3cschool.cn/java/java-io-file.html Java 文件 Java 文件 Java 文件操作 Java 输入流 Java 输入流 Java 文件输入流 Java 缓冲输入流 Java 推回输入流 Java 数据输入...

boonya
37分钟前
5
0
SDKMAN推荐一个好

是在大多数基于Unix的系统上管理多个软件开发工具包的并行版本的工具。它提供了一个方便的命令行界面(CLI)和API来安装,切换,删除和列出sdk相关信息。以下是一些特性: By Developers, fo...

hotsmile
今天
9
0
什么是 HDFS

是什么? HDFS 是基于 Java 的分布式文件系统,允许您在 Hadoop 集群中的多个节点上存储大量数据。 起源: 单机容量往往无法存储大量数据,需要跨机器存储。统一管理分布在集群上的文件系统称...

Garphy
今天
5
0
一起来学Java8(四)——复合Lambda

在一起来学Java8(二)——Lambda表达式中我们学习了Lambda表达式的基本用法,现在来了解下复合Lambda。 Lambda表达式的的书写离不开函数式接口,复合Lambda的意思是在使用Lambda表达式实现函...

猿敲月下码
今天
11
0
debian10使用putty配置交换机console口

前言:Linux的推广普及,需要配合解决实际应用方能有成效! 最近强迫自己用linux进行实际工作,过程很痛苦,还好通过网络一一解决,感谢各位无私网友博客的帮助! 系统:debian10 桌面:xfc...

W_Lu
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部