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

asp.net刷新本页面的六种方法总结

Jan 07 Javascript

jquery搜索框效果实现方法

Jan 16 Javascript

为什么JS中eval处理JSON数据要加括号

Apr 13 Javascript

JS实现静态页面搜索并高亮显示功能完整示例

Sep 19 Javascript

VUE + UEditor 单图片跨域上传功能的实现方法

Feb 08 Javascript

深入理解JavaScript和TypeScript中的class

Apr 22 Javascript

动态加载JavaScript文件的3种方式

May 05 Javascript

Vue-Cli项目优化操作的实现

Oct 27 Javascript

小程序怎样让wx.navigateBack更好用的方法实现

Nov 01 Javascript

12 种使用Vue 的最佳做法

Mar 30 Javascript

区分vue-router的hash和history模式

Oct 03 Javascript

Canvas跟随鼠标炫彩小球的实现

Apr 11 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＋DBM的同学录程序(2)

2006/10/09 PHP

php adodb连接带密码access数据库实例，测试成功

2008/05/14 PHP

php操作sqlserver关于时间日期读取的小小见解

2009/11/29 PHP

PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析

2017/07/22 PHP

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

2020/05/01 PHP

AJAX架构之Dojo篇

2007/04/10 Javascript

3种不同方式的焦点图轮播特效分享

2013/10/30 Javascript

jQuery拖动div、移动div、弹出层实现原理及示例

2014/04/08 Javascript

原生js实现的贪吃蛇网页版游戏完整实例

2015/05/18 Javascript

简单谈谈javascript Date类型

2015/09/06 Javascript

jQuery简单实现提交数据出现loading进度条的方法

2016/03/29 Javascript

关于网页中的无缝滚动的js代码

2016/06/09 Javascript

Jquery把获取到的input值转换成json

2017/05/15 jQuery

修改 bootstrap table 默认detailRow样式的实例代码

2017/07/21 Javascript

分析javascript原型及原型链

2018/03/18 Javascript

详解JS取出两个数组中的不同或相同元素

2019/03/20 Javascript

JavaScript实现的开关灯泡点击切换特效示例

2019/07/08 Javascript

Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

2019/10/25 Javascript

jquery实现简单拖拽效果

2020/07/20 jQuery

[01:56]林书豪DOTA2上海特级锦标赛励志短片

2016/03/05 DOTA

Python下线程之间的共享和释放示例

2015/05/04 Python

python使用nntp读取新闻组内容的方法

2015/05/08 Python

在Python中操作字符串之startswith()方法的使用

2015/05/20 Python

Django配置MySQL数据库的完整步骤

2019/09/07 Python

使用OpenCV实现人脸图像卡通化的示例代码

2021/01/15 Python

css3简单练习实现遨游浏览器logo的绘制

2013/01/30 HTML / CSS

软件缺陷的分类都有哪些

2014/08/22 面试题

国外的一些J2EE面试题一

2012/10/13 面试题

物理教师自荐信范文

2013/12/28 职场文书

自我介绍演讲稿

2014/01/15 职场文书

学前班评语大全

2014/05/04 职场文书

员工安全承诺书

2014/05/22 职场文书

2014年公务员转正工作总结

2014/11/07 职场文书

上下班时间调整通知

2015/04/23 职场文书

素质教育培训心得体会

2016/01/19 职场文书

苹果电脑mac os中货币符号快捷输入

2022/02/17 杂记