编程 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判断元素上是否绑定了指定事件的方法

Mar 17 Javascript

javascript实现可全选、反选及删除表格的方法

May 15 Javascript

JQuery EasyUI的使用

Feb 24 Javascript

Node.js操作mysql数据库增删改查

Mar 30 Javascript

JavaScript希尔排序、快速排序、归并排序算法

May 08 Javascript

jQuery 获取屏幕高度、宽度的简单实现案例

May 17 Javascript

jQuery Ajax传值到Servlet出现乱码问题的解决方法

Oct 09 Javascript

从零开始学习Node.js系列教程之设置HTTP头的方法示例

Apr 13 Javascript

JavaScript实现省市联动过程中bug的解决方法

Dec 04 Javascript

vue动态加载SVG文件并修改节点数据的操作代码

Aug 17 Javascript

原生JavaScript实现幻灯片效果

Feb 19 Javascript

react中props 的使用及进行限制的方法

Apr 28 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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程

2007/03/16 PHP

PHP禁止页面缓存的代码

2011/10/23 PHP

setcookie中Cannot modify header information-headers already sent by错误的解决方法详解

2013/05/08 PHP

PHP闭包函数详解

2016/02/13 PHP

关于PHP文件的自动运行方法分析

2016/05/13 PHP

基于jquery实现的上传图片及图片大小验证、图片预览效果代码

2011/04/12 Javascript

jQuery事件绑定.on()简要概述及应用

2013/02/07 Javascript

用JavaScript实现动画效果的方法

2013/07/20 Javascript

javascript实现删除前弹出确认框

2015/06/04 Javascript

EasyUi中的Combogrid 实现分页和动态搜索远程数据

2016/04/01 Javascript

JS中sort函数排序用法实例分析

2016/06/16 Javascript

基于javascript实现的购物商城商品倒计时实例

2016/12/11 Javascript

解析ajaxFileUpload 异步上传文件简单使用

2016/12/30 Javascript

jQuery命名空间与闭包用法示例

2017/01/12 Javascript

基于webpack-hot-middleware热加载相关错误的解决方法

2018/02/22 Javascript

详解nuxt sass全局变量(公共scss解决方案)

2018/06/27 Javascript

javascript动态创建对象的属性详解

2018/11/07 Javascript

nodejs检测因特网是否断开的解决方案

2019/04/17 NodeJs

JS如何实现动态添加的元素绑定事件

2019/11/12 Javascript

vue中实现回车键登录功能

2020/02/19 Javascript

python海龟绘图实例教程

2014/07/24 Python

python通过pil将图片转换成黑白效果的方法

2015/03/16 Python

Django框架中方法的访问和查找

2015/07/15 Python

深度定制Python的Flask框架开发环境的一些技巧总结

2016/07/12 Python

Python中使用双下划线防止类属性被覆盖问题

2019/06/27 Python

Pandas 缺失数据处理的实现

2019/11/04 Python

如何使用python进行pdf文件分割

2019/11/11 Python

python 上下文管理器及自定义原理解析

2019/11/19 Python

python实现上传文件到linux指定目录的方法

2020/01/03 Python

python同义词替换的实现（jieba分词）

2020/01/21 Python

基于Python的接口自动化读写excel文件的方法

2021/01/15 Python

俄罗斯药房连锁店：ASNA

2020/06/20 全球购物

市级文明单位申报材料

2014/05/07 职场文书

2014教师“四风问题”对照检查材料思想汇报

2014/09/16 职场文书

银行员工犯错检讨书

2014/09/16 职场文书

Python matplotlib安装以及实现简单曲线的绘制

2022/04/26 Python