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

让元素在网页中可拖动示例代码

Aug 13 Javascript

jquery获取选中的文本和值的方法

Jul 08 Javascript

有关jquery与DOM节点操作方法和属性记录

Apr 15 Javascript

在web中js实现类似excel的表格控件

Sep 01 Javascript

基于vue+ bootstrap实现图片上传图片展示功能

May 17 Javascript

20行JS代码实现粘贴板复制功能

Feb 06 Javascript

vue路由事件beforeRouteLeave及组件内定时器的清除方法

Sep 29 Javascript

原生JS实现的自动轮播图功能详解

Dec 28 Javascript

小程序实现左右来回滚动字幕效果

Dec 28 Javascript

js数组去重的方法总结

Jan 18 Javascript

vue引入微信sdk 实现分享朋友圈获取地理位置功能

Jul 04 Javascript

vue中实现回车键登录功能

Feb 19 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适配器模式（Adapter）

2014/11/25 PHP

php中实现用数组妩媚地生成要执行的sql语句

2015/07/10 PHP

微信公众号开发之通过接口删除菜单

2017/02/20 PHP

PHP并发查询MySQL的实例代码

2017/08/09 PHP

Extjs改变树节点的勾选状态点击按钮将复选框去掉

2013/11/14 Javascript

JavaScript的函数式编程基础指南

2016/03/19 Javascript

Extjs实现下拉菜单效果

2016/04/01 Javascript

微信小程序开发之录音机音频播放动画实例 (真机可用)

2016/12/08 Javascript

JavaScript Ajax实现异步通信

2016/12/14 Javascript

各种选择框jQuery的选中方法(实例讲解)

2017/06/27 jQuery

浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验

2018/12/20 Javascript

Nuxt.js实战和配置详解

2019/08/05 Javascript

微信小程序登录时如何获取input框中的内容

2019/12/04 Javascript

微信小程序入门之指南针

2020/10/22 Javascript

[02:06]DOTA2英雄基础教程暗影萨满

2013/12/16 DOTA

python从sqlite读取并显示数据的方法

2015/05/08 Python

Python+Selenium自动化实现分页（pagination）处理

2017/03/31 Python

pytorch 把MNIST数据集转换成图片和txt的方法

2018/05/20 Python

对python3 一组数值的归一化处理方法详解

2018/07/11 Python

python在html中插入简单的代码并加上时间戳的方法

2018/10/16 Python

Python3 读、写Excel文件的操作方法

2018/10/20 Python

python实现堆排序的实例讲解

2020/02/21 Python

Python实现小黑屋游戏的完整实例

2021/01/06 Python

HashMap和Hashtable的区别

2013/05/18 面试题

一篇.NET面试题

2014/09/29 面试题

vue路由实现登录拦截

2021/03/24 Vue.js

拓展培训心得体会

2014/01/04 职场文书

2014社区三八妇女节活动总结

2014/03/01 职场文书

《池塘边的叫声》教学反思

2014/04/12 职场文书

扬尘污染防治方案

2014/06/15 职场文书

青年标兵事迹材料

2014/08/16 职场文书

2014年工会工作总结

2014/11/12 职场文书

2014年环保工作总结

2014/11/26 职场文书

工程项目经理岗位职责

2015/02/02 职场文书

水电工程师岗位职责

2015/02/13 职场文书

简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl

2021/03/31 HTML / CSS