首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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程序设计有所帮助。

jQuery实现带动画效果的二级下拉导航方法

- Author -

杨德伟

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
图片懒加载插件实例分享（含解析）
Jan 09 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
什么是Vue.js框架 为什么选择它？
Oct 17 Javascript
页面点击小红心js实现代码
May 26 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 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
根德(2) 德生PL330(2) 德生9700DX(1) 飞利浦(2) ICF-SW7600GR(1) Panasonic(1) 松下(1) PHILIPS(3) ICF-SW55(1) 德劲1103(3)
You might like
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
新手该如何学python怎么学好python？
2008/10/07 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python实现数据写入excel表格
2018/03/25 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
制药工程专业应届生求职信
2013/09/24 职场文书
研究生毕业鉴定
2014/01/29 职场文书
创业计划书模版
2014/02/05 职场文书
工程质量承诺书范文
2014/03/27 职场文书
战略合作意向书
2014/07/29 职场文书
端午节活动总结报告
2015/02/11 职场文书
病危通知书样本
2015/04/17 职场文书
借条格式范本
2015/05/25 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL