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

用于table内容排序

Jul 21 Javascript

基于Jquery+Ajax+Json实现分页显示附效果图

Jul 30 Javascript

JsRender实用入门教程

Oct 31 Javascript

EasyUI实现第二层弹出框的方法

Mar 01 Javascript

JS随机调用指定函数的方法

Jul 01 Javascript

非常实用的12个jquery代码片段

Nov 02 Javascript

js捕捉键盘事件和按键键值的方法

Oct 10 Javascript

使用prop解决一个checkbox选中后再次选中失效的问题

Jul 05 Javascript

在JavaScript中如何访问暂未存在的嵌套对象

Jun 18 Javascript

js获取浏览器地址（获取第1个斜杠后的内容）

Sep 03 Javascript

使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部

Sep 16 Javascript

原生JavaScript实现贪吃蛇游戏

Nov 04 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

xml在joomla表单中的应用详解分享

2012/07/19 PHP

php 模拟get_headers函数的代码示例

2013/04/27 PHP

浅析php变量作用域的一些问题

2013/08/08 PHP

PHP函数import_request_variables()用法分析

2016/04/02 PHP

js 禁止选择功能实现代码(兼容IE/Firefox)

2010/04/23 Javascript

利用div+jquery自定义滚动条样式的2种方法

2013/07/18 Javascript

javascript中直接写php代码的方法

2013/07/31 Javascript

JavaScript中的操作符==与===介绍

2014/12/31 Javascript

angularJS中router的使用指南

2015/02/09 Javascript

BootStrap selectpicker

2016/06/20 Javascript

基于jQuery实现Accordion手风琴自定义插件

2020/10/13 Javascript

AngularJS中的按需加载ocLazyLoad示例

2017/01/11 Javascript

vue-router命名路由和编程式路由传参讲解

2019/01/19 Javascript

微信小程序BindTap快速连续点击目标页面跳转多次问题处理

2019/04/08 Javascript

vue-router的两种模式的区别

2019/05/30 Javascript

layer弹出层扩展主题的方法

2019/09/11 Javascript

微信小程序缓存支持二次开发封装实现解析

2019/12/16 Javascript

Vue表单提交点击事件只允许点击一次的实例

2020/10/23 Javascript

Python Socket编程入门教程

2014/07/11 Python

Python实现网站文件的全备份和差异备份

2014/11/30 Python

Python多层嵌套list的递归处理方法(推荐)

2016/06/08 Python

python遍历一个目录,输出所有的文件名的实例

2018/04/23 Python

django manage.py扩展自定义命令方法

2018/05/27 Python

python 读取文件并替换字段的实例

2018/07/12 Python

利用PyQt5+Matplotlib 绘制静态/动态图的实现代码

2020/07/13 Python

HTML5视频播放插件 video.js介绍

2018/09/29 HTML / CSS

TIME时代杂志台湾总代理：台时亚洲

2018/10/22 全球购物

Agoda中文官网：安可达（低价预订全球酒店）

2021/01/18 全球购物

路由表示做什么用的？在linux环境中怎么来配置一条默认路由？

2013/06/07 面试题

DOM和JQuery对象有什么区别

2016/11/11 面试题

软件工程师岗位职责

2013/11/16 职场文书

中专生自我鉴定范文

2014/02/02 职场文书

捐款倡议书格式范文

2014/05/14 职场文书

演讲稿开场白台词

2014/08/25 职场文书

毕业生自荐信范文

2015/03/05 职场文书

小学生运动会广播

2015/08/19 职场文书