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

解放web程序员的输入验证

Oct 06 Javascript

一个简单的js树形菜单

Dec 09 Javascript

jquery实现省市select下拉框的替换(示例代码)

Feb 22 Javascript

jQuery 隐藏和显示 input 默认值示例

Jun 03 Javascript

jQuery实现移动和渐变特效的点击事件

Feb 26 Javascript

jQuery选择器之基本选择器与层次选择器

Mar 03 Javascript

jQuery实现预加载图片的方法

Mar 17 Javascript

jquery实现简洁文件上传表单样式

Nov 02 Javascript

原生JS实现平滑回到顶部组件

Mar 16 Javascript

Angular客户端请求Rest服务跨域问题的解决方法

Sep 19 Javascript

layui点击数据表格添加或删除一行的例子

Sep 12 Javascript

前端canvas中物体边框和控制点的实现示例

Aug 05 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 批量查询搜狗sogou代码分享

2015/05/17 PHP

显示、隐藏密码

2006/07/01 Javascript

CSS+Jquery实现页面圆角框方法大全

2009/12/24 Javascript

js 获取input点选按钮的值的方法

2014/04/14 Javascript

原生js实现移动开发轮播图、相册滑动特效

2015/04/17 Javascript

JavaScript中循环遍历Array与Map的方法小结

2016/03/12 Javascript

ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法

2016/09/22 Javascript

js css自定义分页效果

2017/02/24 Javascript

JS获取短信验证码倒计时的实现代码

2017/05/22 Javascript

JS获取填报扩展单元格控件的值的解决办法

2017/07/14 Javascript

用vue封装插件并发布到npm的方法步骤

2017/10/18 Javascript

vue实现商城上货组件简易版

2017/11/27 Javascript

jQuery实现简单复制json对象和json对象集合操作示例

2018/07/09 jQuery

ionic使用angularjs表单验证（模板验证）

2018/12/12 Javascript

利用d3.js实现蜂巢图表带动画效果

2019/09/03 Javascript

Handtrack.js库实现实时监测手部运动(推荐)

2021/02/08 Javascript

[02:51]DOTA2英雄基础教程艾欧

2014/01/13 DOTA

python处理中文编码和判断编码示例

2014/02/26 Python

python嵌套函数使用外部函数变量的方法(Python2和Python3)

2016/01/31 Python

python实现斐波那契数列的方法示例

2017/01/12 Python

python3解析库lxml的安装与基本使用

2018/06/27 Python

python开启debug模式的方法

2019/06/27 Python

Django model update的多种用法介绍

2020/03/28 Python

django 读取图片到页面实例

2020/03/27 Python

python pygame 愤怒的小鸟游戏示例代码

2021/02/25 Python

机电一体化毕业生求职信

2013/11/02 职场文书

校友会欢迎辞

2014/01/13 职场文书

大学生军训感想

2014/02/16 职场文书

《邮票齿孔的故事》教学反思

2014/02/22 职场文书

公证委托书模板

2014/04/03 职场文书

《九寨沟》教学反思

2014/04/08 职场文书

三八妇女节趣味活动方案

2014/08/23 职场文书

勿忘国耻9.18演讲稿（经典篇）

2014/09/14 职场文书

个人优缺点总结

2015/02/28 职场文书

幼儿园中班教学反思

2016/03/03 职场文书

nginx sticky实现基于cookie负载均衡示例详解

2022/12/24 Servers