文档章节

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

lotozhou
 lotozhou
发布于 2015/11/30 15:08
字数 324
阅读 633
收藏 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
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
Bootstrap 响应式项目分享一

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

Neuro_annie
2017/12/27
0
0
【翻译】移动端友好的响应式导航栏教程

以下是译文: 今天我来教大家设计一个色彩绚丽且移动端友好的响应式导航栏。这个导航栏的灵感源自一款叫做“无主之地(Borderlands)”游戏中的一个叫做Maliwan武器生产商商标所采用的颜色集...

jndion2011
2015/05/23
0
2
JavaScript浏览器地址栏特效之无敌风火轮特效

这篇文章和大家分享一个 javascript 在浏览器地址栏上的特效,非常的有趣。它可以使页面上所有的图片元素一个个得排列起来并不停的转圈。因为转圈弧度为半圆且棱角分明,我们姑且称之为风火轮...

脚本编程网站
2013/04/26
0
1
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望...

Big_BoBo
2015/08/25
0
2
JavaScript入门(一)

本书主要讲述JavaScript脚本语言以及如何在实际开发中使用它。在读完本书之后,你就能够: l 理解JavaScript的语法和结构。 l 创建容易理解和维护的脚本。 l 编写不与其他JavaScript冲突的脚...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

09-利用思维导图梳理JavaSE-

09-利用思维导图梳理JavaSE-Java IO流 主要内容 1.Java IO概述 1.1.定义 1.2.输入流 - InputStream 1.3.输出流 - OutputStream 1.4.IO流的分类 1.5.字符流和字节流 2.InputStream类 2.1.File...

飞鱼说编程
29分钟前
1
0
Spring Cloud 微服务的那点事

在详细的了解SpringCloud中所使用的各个组件之前,我们先了解下微服务框架的前世今生。 单体架构 在网站开发的前期,项目面临的流量相对较少,单一应用可以实现我们所需要的功能,从而减少开...

我是你大哥
39分钟前
1
0
步步深入MySQL:架构->查询执行流程->SQL解析顺序

一、前言 一直是想知道一条SQL语句是怎么被执行的,它执行的顺序是怎样的,然后查看总结各方资料,就有了下面这一篇博文了。 本文将从MySQL总体架构--->查询执行流程--->语句执行顺序来探讨一...

Java干货分享
53分钟前
1
0
gson1.7.1线程并发导致空指针问题

java.lang.NullPointerExceptionat com.google.gson.FieldAttributes.getAnnotationFromArray(FieldAttributes.java:231)at com.google.gson.FieldAttributes.getAnnotation(FieldAttribut......

东风125
今天
3
0
以太坊RPC接口使用

以太坊RPC接口文档: https://github.com/ethereum/wiki/wiki/JSON-RPC#web3_clientversion 使用方式: 比如我要调用某个合约的balanceOf(address _owner)方法。 因为没有改变合约的状态,所以...

王坤charlie
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部