编程 Javascript

jQuery实现带动画效果的二级下拉导航方法

Posted in Javascript onMarch 11, 2015

本文实例讲述了jQuery实现带动画效果的二级下拉导航方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery二级下滑导菜单</title>

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

<script type="text/javascript" src="jquery.effects.core.min.js"></script>

<style type="text/css">

body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0; padding:10px;}

.nav_list{ list-style:none; margin:0; padding:0;}

.nav_list li{ float:left; text-align:center;  margin-right:10px; position:relative;}

.nav_list li a{ width:80px; text-align:center; padding:4px 0; text-decoration:none;color:#ccc; background:#996666; display:block; float:left;}

.nav_list li a.current{ width:80px; text-align:center; padding:4px 0; text-decoration:none;color:#fff; background:#f00; display:block; float:left;}

.nav_list li div.second{ color:#999999; height:0px; overflow:hidden; position:absolute; left:0; top:22px; width:80px;}

.nav_list li div.second a{ background:#666666; color:#fff;  border:none; width:80px; border-top:1px solid 

#FFFFFF; padding:5px 0;}

</style>

<script type="text/javascript">

$(function(){  

  Menu(".nav_list");

});

function Menu(ul_class_name){   

  Second(".nav_list");

  var li_name = ul_class_name+" "+"li";

  $("div.second").css("opacity","0.1");

  $(li_name).hover(

    function(){

      var a_height =  $(this).children("div.second a:first").css("height");

      var a_count = $(this).children("div.second").children("a").length;

      var slide_hieght =  (parseInt(a_height)+11)*a_count;

      $(this).children("div.second").stop().animate({height:slide_hieght+"px",opacity:"0.9"},600);   

      $(this).children("a:not(.current)").stop().animate({backgroundColor:"#f00",color:"#fff"},800);

    },function(){

      $(this).children("div.second").stop().animate({height:"0px",opacity:"0.1"},600);

      $(this).children("a:not(.current)").stop().animate({backgroundColor:"#996666",color:"#ccc"},800);

    });

}

function Second(ul_class_name){

  var second_menu = ul_class_name+" "+"li"+" "+"div.second"+" "+">"+" "+"a";

  $(second_menu).hover(

   function(){

      $(this).stop().animate({backgroundColor:"#000",opacity:"1"},400); 

    },function(){

      $(this).stop().animate({backgroundColor:"#666",opacity:"0.9"},400);

    });

}

</script>

</head>

<body>

<ul class="nav_list">

  <li>

    <a href="#" class="current">Test_1</a>

    <div class="second">

      <a href="#">menu_1</a>

      <a href="#">menu_1</a>

      <a href="#">menu_1</a>

    </div>

  <li>

  <li>

    <a href="#">Test_2</a>

    <div class="second">

      <a href="#">menu_1</a>

      <a href="#">menu_1</a>

      <a href="#">menu_1</a>

      <a href="#">menu_1</a>

      <a href="#">menu_1</a>

      <a href="#">menu_1</a>

      <a href="#">menu_1</a>

      <a href="#">menu_1</a>

    </div>

  <li>

  <li>

    <a href="#">Test_3</a>

    <div class="second">

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

      <a href="#">menu_3</a>

    </div>

  <li>

  <li>

    <a href="#">Test_4</a>

    <div class="second">

      <a href="#">menu_4</a>

      <a href="#">menu_4</a>

      <a href="#">menu_4</a>

    </div>

  <li>

  <li>

    <a href="#">Test_5</a>

    <div class="second">

      <a href="#">menu_5</a>

      <a href="#">menu_5</a>

      <a href="#">menu_5</a>

    </div>

  <li>

</ul>

<div style="width:800px; clear:both; padding:10px;">

  <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

- Author -

杨德伟

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一页面多XMLHttpRequest对象

Jan 22 Javascript

checkbox 复选框不能为空

Jul 11 Javascript

Array.prototype.slice 使用扩展

Jun 09 Javascript

自定义ExtJS控件之下拉树和下拉表格附源码

Oct 15 Javascript

javascript中取前n天日期的两种方法分享

Jan 26 Javascript

js如何判断输入字符串长度

Dec 16 Javascript

jqueryMobile 动态添加元素,展示刷新视图的实现方法

May 28 Javascript

vue loadmore组件上拉加载更多功能示例代码

Jul 19 Javascript

如何使用VuePress搭建一个类型element ui文档

Feb 14 Javascript

微信小程序获取用户信息及手机号（后端TP5.0）

Sep 12 Javascript

node.js实现http服务器与浏览器之间的内容缓存操作示例

Feb 11 Javascript

关于vue的列表图片选中打钩操作

Sep 09 Javascript

jquery图形密码实现方法

Mar 11 #Javascript

jQuery模拟新浪微博首页滚动效果的方法

Mar 11 #Javascript

jQuery实现在textarea指定位置插入字符或表情的方法

Mar 11 #Javascript

jQuery实现统计输入文字个数的方法

Mar 11 #Javascript

jQuery处理json数据返回数组和输出的方法

Mar 11 #Javascript

jquery实现表格本地排序的方法

Mar 11 #Javascript

jQuery实现渐变下拉菜单的简单方法

Mar 11 #Javascript

You might like

Yii实现MySQL多数据库和读写分离实例分析

2014/12/03 PHP

Thinkphp5框架简单实现钩子(Hook)行为的方法示例

2019/09/03 PHP

TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】

2020/04/05 PHP

PHP设计模式概论【概念、分类、原则等】

2020/05/01 PHP

PHP7 整型处理机制修改

2021/03/09 PHP

javascript应用：Iframe自适应其加载的内容高度

2007/04/10 Javascript

Google韩国首页图标动画效果

2007/08/26 Javascript

在JavaScript中访问字符串的子串

2015/07/07 Javascript

JS实现简单的二维矩阵乘积运算

2016/01/26 Javascript

深入理解JS函数的参数(arguments)的使用

2016/05/28 Javascript

实现React单页应用的方法详解

2016/08/02 Javascript

Websocket协议详解及简单实例代码

2016/12/12 Javascript

Angular实现的内置过滤器orderBy排序与模糊查询功能示例

2017/12/29 Javascript

node.js使用免费的阿里云ip查询获取ip所在地【推荐】

2018/09/03 Javascript

微信小程序实现获取用户信息并存入数据库操作示例

2019/05/07 Javascript

vue实现记事本功能

2019/06/26 Javascript

nodejs读取图片返回给浏览器显示

2019/07/25 NodeJs

layui复选框的全选与取消实现方法

2019/09/02 Javascript

vue 中固定导航栏的实例代码

2019/11/01 Javascript

解决vue自定义全局消息框组件问题

2019/11/22 Javascript

UEditor 自定义图片视频尺寸校验功能的实现代码

2020/10/20 Javascript

[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻

2018/04/09 DOTA

Win10下Python环境搭建与配置教程

2016/11/18 Python

用 Python 爬了爬自己的微信朋友(实例讲解)

2017/08/25 Python

基于Python socket的端口扫描程序实例代码

2018/02/09 Python

python 列表删除所有指定元素的方法

2018/04/19 Python

python模拟斗地主发牌

2020/04/22 Python

python将logging模块封装成单独模块并实现动态切换Level方式

2020/05/12 Python

利用python对excel中一列的时间数据更改格式操作

2020/07/14 Python

CSS3伪类选择器：nth-child()

2009/04/02 HTML / CSS

JAVA高级程序员面试题

2013/09/06 面试题

财务会计专业个人求职信范本

2014/01/08 职场文书

如何撰写一封出色的求职信

2014/04/27 职场文书

校园环保建议书

2014/05/14 职场文书

关于运动会的广播稿（10篇）

2014/09/12 职场文书

同步小康驻村工作简报

2015/07/20 职场文书