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

javascript之对系统的toFixed()方法的修正

May 08 Javascript

javascript hashtable 修正版下载

Dec 30 Javascript

JavaScript高级程序设计（第3版）学习笔记6 初识js对象

Oct 11 Javascript

jQuery的几个我们必须了解的特点

May 03 Javascript

基于jQuery实现仿百度首页换肤背景图片切换代码

Aug 25 Javascript

javascript中利用柯里化函数实现bind方法

Apr 29 Javascript

Node.js+Express配置入门教程详解

May 19 Javascript

BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

Dec 01 Javascript

JS开发中百度地图+城市联动实现实时触发查询地址功能

Apr 13 Javascript

JS面向对象编程——ES6 中class的继承用法详解

Mar 03 Javascript

Vue2.4+新增属性.sync、$attrs、$listeners的具体使用

Mar 08 Javascript

js+css3实现简单时钟特效

Sep 13 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 数组函数

2009/12/26 PHP

详解PHP变量传值赋值和引用赋值变量销毁

2019/03/23 PHP

浅谈laravel中的关联查询with的问题

2019/10/10 PHP

js 替换功能函数，用正则表达式解决，js的全部替换

2010/12/08 Javascript

javascript getElementsByTagName

2011/01/31 Javascript

用jquery实现自定义风格的滑动条实现代码

2011/04/26 Javascript

javascript小组件原生table排序表格脚本(兼容ie firefox opera chrome)

2012/07/25 Javascript

JS在textarea光标处插入文本的小例子

2013/03/22 Javascript

js改变img标签的src属性在IE下没反应的解决方法

2013/07/23 Javascript

深入理解JavaScript系列（36）：设计模式之中介者模式详解

2015/03/04 Javascript

Jsonp post 跨域方案

2015/07/06 Javascript

AngularJS入门教程之控制器详解

2016/07/27 Javascript

详解如何较好的使用js

2016/12/16 Javascript

基于JavaScript实现淘宝商品广告效果

2017/08/10 Javascript

jQuery ajax调用webservice注意事项

2017/10/08 jQuery

Vue 将后台传过来的带html字段的字符串转换为 HTML

2018/03/29 Javascript

jQuery AJAX 方法success()后台传来的4种数据详解

2018/08/08 jQuery

Vue源码解析之Template转化为AST的实现方法

2018/12/14 Javascript

node.js使用fs读取文件出错的解决方案

2019/10/23 Javascript

vue实现两个区域滚动条同步滚动

2020/12/13 Vue.js

[33:15]2018DOTA2亚洲邀请赛3月30日小组赛B组 VP VS Mineski

2018/03/31 DOTA

python练习程序批量修改文件名

2014/01/16 Python

Python中的map()函数和reduce()函数的用法

2015/04/27 Python

Python编程之gui程序实现简单文件浏览器代码

2017/12/08 Python

Pandas 对Dataframe结构排序的实现方法

2018/04/10 Python

Python如何处理大数据？3个技巧效率提升攻略（推荐）

2019/04/15 Python

Python实现发票自动校核微信机器人的方法

2020/05/22 Python

IE浏览器单独写CSS样式的几种方法

2014/10/14 HTML / CSS

HTML5计时器小例子

2013/10/15 HTML / CSS

英国广泛的照明产品网站：Lights4living

2018/01/28 全球购物

学子宴答谢词

2014/01/25 职场文书

学生安全教育材料

2014/02/14 职场文书

优秀毕业生找工作自荐信

2014/06/23 职场文书

2014年大学生职业规划书：未来不是梦，只要勇敢冲！

2014/09/22 职场文书

医院党建工作总结2015

2015/05/26 职场文书

Python基本知识点总结

2022/04/07 Python