登录
当前位置： 首页 > 编程笔记 >

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

洪河
2023-03-14
本文向大家介绍jQuery实现带动画效果的二级下拉导航方法，包括了jQuery实现带动画效果的二级下拉导航方法的使用技巧和注意事项，需要的朋友参考一下

本文实例讲述了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实现二级导航下拉菜单效果

    本文向大家介绍jquery实现二级导航下拉菜单效果，包括了jquery实现二级导航下拉菜单效果的使用技巧和注意事项，需要的朋友参考一下 下拉菜单实现很简单，纯css也能实现，但是我不擅长，用jquery也就两行代码，于是就用jquery+css实现简单二级下拉菜单导航，分享给大家供大家参考，具体内容如下 运行效果图： 具体代码： 第一步：确定导航的html格式 第二步：CSS实现导航效果     

  • jquery实现二级导航下拉菜单效果实例

    本文向大家介绍jquery实现二级导航下拉菜单效果实例，包括了jquery实现二级导航下拉菜单效果实例的使用技巧和注意事项，需要的朋友参考一下 大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有： 1)使用$(function(){...})获取到想要

  • jQuery实现带动画效果的多级下拉菜单代码

    本文向大家介绍jQuery实现带动画效果的多级下拉菜单代码，包括了jQuery实现带动画效果的多级下拉菜单代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码。分享给大家供大家参考。具体如下： 这是一款基于jQuery实现的多级下拉菜单，带动画效果，所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌

  • jQuery实现简单下拉导航效果

    本文向大家介绍jQuery实现简单下拉导航效果，包括了jQuery实现简单下拉导航效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现简单下拉导航效果。分享给大家供大家参考。具体如下： 这里粗略做一款基于jquery的下拉导航菜单效果，我觉得挺不错，虽然没有怎么美化，但是代码易懂，另外修补的空间也比较大，相信对学习CSS以及jquery的朋友有不小的帮助。 运行效果截图如下

  • jQuery实现的导航下拉菜单效果

    本文向大家介绍jQuery实现的导航下拉菜单效果，包括了jQuery实现的导航下拉菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的导航下拉菜单效果。分享给大家供大家参考，具体如下： 1.效果如图所示： 2.html代码： 3.jQuery代码: 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》

  • jQuery实现带滚动线条导航效果的方法

    本文向大家介绍jQuery实现带滚动线条导航效果的方法，包括了jQuery实现带滚动线条导航效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现带滚动线条导航效果的方法。分享给大家供大家参考。具体分析如下： 最早见到这种导航是在魅族的官网，当时（去年）觉得挺不错的但自己不会JavaScript，因此那时“可望而不可及”。今日去手机QQ for Android官网，又发

  • js实现带缓动动画的导航栏效果

    本文向大家介绍js实现带缓动动画的导航栏效果，包括了js实现带缓动动画的导航栏效果的使用技巧和注意事项，需要的朋友参考一下  话不多说，请看实例代码： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！

  • jQuery实现的导航下拉菜单效果示例

    本文向大家介绍jQuery实现的导航下拉菜单效果示例，包括了jQuery实现的导航下拉菜单效果示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的导航下拉菜单效果。分享给大家供大家参考，具体如下： 效果图： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQu

相关阅读

jQuery实现带滚动线条导航效果的方法js实现带缓动动画的导航栏效果jQuery实现的导航下拉菜单效果示例php+jQuery实现的三级导航栏下拉菜单显示效果jQuery实现淡入淡出二级下拉导航菜单的方法

相关文章

jQuery 停止动画厦航二面-线下货拉拉java实习二面货拉拉 java实习二面华测导航java二面 20min

相关问答

javascript - 请教vue+elementUI怎么实现动态下拉框的表格效果？three.js - 如何在arcGis实现动画标注效果？编辑下拉导航栏的HTML+CSS+JSvue.js - 如何使用 Vue 和 Element-Plus 实现输入框聚焦时下拉按钮消失动画效果？javascript - 这个页面伴随scroll上下滑动的动画效果的实现思路是什么？

相关工具

Velocity.js 动画效果库封面展示动画效果视图各种动画效果图片翻转动画效果地图画线导航

相关文档

iOS 核心动画高级技巧如何实现自己的 jQuery各种算法的 Python 实现方案常用算法实现方法Android Animation 动画详解
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.