编程 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 相关文章推荐

jquery $(document).ready() 与window.onload的区别

Dec 28 Javascript

JS判断表单输入是否为空(示例代码)

Dec 23 Javascript

javascript ajax的5种状态介绍

Aug 18 Javascript

jQuery源码解读之hasClass()方法分析

Feb 20 Javascript

JQuery中DOM实现事件移除的方法

Jun 13 Javascript

js+css绘制颜色动态变化的圈中圈效果

Jan 27 Javascript

又一枚精彩的弹幕效果jQuery实现

Jul 25 Javascript

JavaScript实现多栏目切换效果

Dec 12 Javascript

详解Jquery的事件操作和文档操作

Dec 19 Javascript

JavaScript实现动态增删表格的方法

Mar 09 Javascript

vue keep-alive请求数据的方法示例

May 16 Javascript

实例讲解JavaScript截取字符串

Nov 30 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

php通过array_push()函数添加多个变量到数组末尾的方法

2015/03/18 PHP

PHP使用Redis替代文件存储Session的方法

2017/02/15 PHP

Enter转换为Tab的小例子(兼容IE,Firefox)

2013/11/14 Javascript

javascript实现带下拉子菜单的导航菜单效果

2015/05/14 Javascript

js鼠标点击图片切换效果实现代码

2015/11/19 Javascript

javascript cookie的简单应用

2016/02/24 Javascript

JavaScript弹窗基础篇

2016/04/27 Javascript

JS图片定时翻滚效果实现方法

2016/06/21 Javascript

浅谈JavaScript中面向对象的的深拷贝和浅拷贝

2016/08/01 Javascript

深入理解JavaScript创建对象的多种方式以及优缺点

2017/06/01 Javascript

微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤

2018/09/18 Javascript

详解angularjs4部署文件过大解决过程

2018/12/05 Javascript

使用react render props实现倒计时的示例代码

2018/12/06 Javascript

js控制随机数生成概率代码实例

2019/03/21 Javascript

VueCli3.0中集成MockApi的方法示例

2019/07/05 Javascript

微信小程序如何访问公众号文章

2019/07/08 Javascript

浅谈Vue.set实际上是什么

2019/10/17 Javascript

python笔记（2）

2012/10/24 Python

使用python画个小猪佩奇的示例代码

2018/06/06 Python

python使用scrapy发送post请求的坑

2018/09/04 Python

Python Django给admin添加Action的方法实例详解

2019/04/29 Python

在flask中使用python-dotenv+flask-cli自定义命令(推荐)

2020/01/05 Python

django 模版关闭转义方式

2020/05/14 Python

彻底搞懂python 迭代器和生成器

2020/09/07 Python

Django权限控制的使用

2021/01/07 Python

开发人员所需要知道的HTML5性能分析面面观

2012/07/05 HTML / CSS

Html5元素及基本语法详解

2016/08/02 HTML / CSS

Elizabeth Gage官网：英国最好的珠宝设计之一

2020/09/26 全球购物

sort命令的作用和用法

2012/11/04 面试题

Java中各种基本数据类型的默认值都是什么

2016/12/22 面试题

党员自我剖析材料（群众路线）

2014/10/06 职场文书

安全教育的主题班会

2015/08/13 职场文书

2016新年晚会开场白

2015/12/03 职场文书

Python语言内置数据类型

2022/02/24 Python

Java实现学生管理系统(IO版)

2022/02/24 Java/Android

基于PyQt5制作一个群发邮件工具

2022/04/08 Python