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

五段实用的js高级技巧

Dec 20 Javascript

JS去掉第一个字符和最后一个字符的实现代码

Feb 20 Javascript

JQuery Tips相关(1)----关于$.Ready()

Aug 14 Javascript

jstree创建无限分级树的方法【基于ajax动态创建子节点】

Oct 25 Javascript

AngularJS中的Promise详细介绍及实例代码

Dec 13 Javascript

js实现日历与定时器

Feb 22 Javascript

5分钟打造简易高效的webpack常用配置

Jul 04 Javascript

vue-cli的eslint相关用法

Sep 29 Javascript

echarts饼图扇区添加点击事件的实例

Oct 16 Javascript

JS 实现微信扫一扫功能

Sep 14 Javascript

JavaScript提升机制Hoisting详解

Oct 23 Javascript

解决vue项目运行提示Warnings while compiling.警告的问题

Sep 18 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+MySQL 手工注入语句大全推荐

2009/10/30 PHP

php生成zip压缩文件的方法详解

2013/06/09 PHP

WampServer搭建php环境时遇到的问题汇总

2015/07/23 PHP

PHP两个n位的二进制整数相加问题的解决

2018/08/26 PHP

Yii 框架使用Forms操作详解

2020/05/18 PHP

Gambit vs ForZe BO3 第一场 2.13

2021/03/10 DOTA

热点新闻滚动特效的js代码

2013/08/17 Javascript

js图片实时加载提供网页打开速度

2014/09/11 Javascript

js实现类似jquery里animate动画效果的方法

2015/04/10 Javascript

简述Jquery与DOM对象

2015/07/10 Javascript

全面解析Bootstrap表单使用方法（表单按钮）

2015/11/24 Javascript

基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象）

2015/12/28 Javascript

JavaScript获取IP获取的是IPV6 如何校验

2016/06/12 Javascript

jQuery下拉框的简单应用

2016/06/24 Javascript

jQuery中值得注意的trigger方法浅析

2016/12/12 Javascript

JavaScript瀑布流布局实现代码

2017/05/06 Javascript

jQuery实现倒计时功能 jQuery实现计时器功能

2017/09/19 jQuery

简单理解Vue中的nextTick方法

2018/01/30 Javascript

在vue中安装使用vux的教程详解

2018/09/16 Javascript

vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

2019/04/12 Javascript

用python实现的去除win下文本文件头部BOM的代码

2013/02/10 Python

在Python的web框架中中编写日志列表的教程

2015/04/30 Python

python：socket传输大文件示例

2017/01/18 Python

浅谈Python采集网页时正则表达式匹配换行符的问题

2018/12/20 Python

python的pstuil模块使用方法总结

2019/07/26 Python

python psutil监控进程实例

2019/12/17 Python

HTML5中如何显示视频呢 HTML5视频播放demo

2013/06/08 HTML / CSS

html5画布旋转效果示例

2014/01/27 HTML / CSS

html5移动端自适应布局的实现

2020/04/15 HTML / CSS

全球领先的全景影像品牌：Insta360

2019/08/21 全球购物

安全大检查实施方案

2014/02/22 职场文书

英语系本科生求职信

2014/07/15 职场文书

飞机制造技术专业求职信

2014/07/27 职场文书

自强自立美德少年事迹材料

2014/08/16 职场文书

2015年助理工程师工作总结

2015/04/03 职场文书

管理失职检讨书范文

2015/05/05 职场文书